Image placeholder

使用jQuery和CSS打造页面滚动到顶部然后固定的导航效果

Image placeholder
F2EX 2017-01-16

使用 jQuery 和 CSS 打造页面滚动到顶部然后固定的导航效果,有很多网站使用这个非常简单的技术。

创建导航栏,它最初位于浏览器窗口的底部,然后在滚动到顶部时保持固定。

HTML
<section id="screen1">

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

</section>

<section id="screen2"></section>
<section id="screen3"></section>
JS
$(document).ready(function(){
	   $(window).bind('scroll', function() {
	   var navHeight = $( window ).height() - 70;
			 if ($(window).scrollTop() > navHeight) {
				 $('nav').addClass('fixed');
			 }
			 else {
				 $('nav').removeClass('fixed');
			 }
		});
	});

这个代码片段实际上是添加一个类“fixed”,一旦它被滚动到导航栏。如果你滚动回到顶部,类将被删除。需要注意的是,你必须编辑’70’(第4行)到菜单栏的高度(以像素为单位,如果你改变导航高度,也需要改变.fixed类的高度)。

CSS
.fixed {
	position: fixed; 
	top: 0; 
	height: 70px; 
	z-index: 1;
}

2017-01-16