演示请看本站导航,不支持IE678。

HTML(header-navigation是用来指定导航样式的,id=header是用来驱动js的,这里id要和下面js里的document.getElementById相同)


<header class="header-navigation" id="header">
 这是导航
</header>
CSS



.header-navigation {
	  position: fixed;
	  top: 0;
	  width: 100%;
	  height: 60px;
	  line-height: 60px;
	  background-color: #333;
	  text-align: center;
	  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	  z-index: 9999;
	}

/* Slide transitions */
	.slideUp {
	 /* -webkit-transform: translateY(-100px);
	  transform: translateY(-100px);*/
	  -webkit-transform: translateY(-100px);
	  -ms-transform: translateY(-100px);
	  -o-transform: translateY(-100px);
	  transform: translateY(-100px);
	  /*transition: transform .5s ease-out;*/
	  -webkit-transition: transform .5s ease-out;
	  -o-transition: transform .5s ease-out;
	  transition: transform .5s ease-out;
	}

	.slideDown {
	  /*-webkit-transform: translateY(0);
	  transform: translateY(0);*/
	  -webkit-transform: translateY(0);
	  -ms-transform: translateY(0);
	  -o-transform: translateY(0);
	  transform: translateY(0);
	  /*transition: transform .5s ease-out;*/
	  -webkit-transition: transform .5s ease-out;
	  -o-transition: transform .5s ease-out;
	  transition: transform .5s ease-out;
	}
JS



<script type="text/javascript">
	var new_scroll_position = 0;
	var last_scroll_position;
	var header = document.getElementById("header");
	window.addEventListener('scroll', function(e) {
	  last_scroll_position = window.scrollY;
	  // Scrolling down
	  if (new_scroll_position < last_scroll_position && last_scroll_position > 80) {
		// header.removeClass('slideDown').addClass('slideUp');
		header.classList.remove("slideDown");
		header.classList.add("slideUp");
	  // Scrolling up
	  } else if (new_scroll_position > last_scroll_position) {
		// header.removeClass('slideUp').addClass('slideDown');
		header.classList.remove("slideUp");
		header.classList.add("slideDown");
	  }
	  new_scroll_position = last_scroll_position;
	});
</script>


Tags:顶部导航, js, css3, 滚动隐藏