css3页面滚动隐藏显示导航条js特效

来源:https://www.sucaihuo.com/js/2345.html 2017-07-07 20:00浏览(1578) 收藏

css3页面滚动隐藏显示导航条js特效,当页面向下滚动时,导航条隐藏,页面向上滚动时,导航条显示效果代码。(不兼容IE6,7,8)
css3页面滚动隐藏显示导航条js特效
分类:导航菜单 > 分类导航 难易:初级
查看演示 下载资源 下载积分: 10 积分

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>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2