js鼠标滚动自动隐藏导航菜单特效代码下载

js鼠标滚动自动隐藏导航菜单特效代码下载

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/zzsc.css">

2. HTML代码

<header class="header-navigation" id="header">
  <nav> <a class="link" href="#" title="Home">首页</a> <a class="link" href="#" title="About">关于我们</a> <a class="link" href="#" title="Contact">联系我们</a> </nav>
</header>
<div class="zzsc-container">
	<div class="zzsc-header">
	</div>
</div>
<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>

用户评论

18素材网

一个让开发更高效的素材分享平台,用于快速开发强大的Web界面。


官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:864918708
Css3+Html5讨论群
群号:864918708

加群请备注:从官网了解到