使用js实现导航窗格在页面下拉以后固定在页面顶端

使用js实现导航窗格在页面下拉以后固定在页面顶端。

bootstrap中的组件可以实现导航栏固定在页面的最顶端，但是有些时候导航栏并不是在页面最顶端显示的，此时bootstrap组件就不适用了。经过多次测试，最终得到了这种简便方法，留存下来以便不时之需，也可以适时拿出来显摆一下，哈哈哈。。。

话不多说，直接上代码：

首先是HTML部分，当然要留出来第一个div，用来放一些标题之类的内容，随后就是导航栏，此处的container是bootstrap的栅格布局，懂的人自然懂，不懂也没关系，container、row、col-md-12这三个div删掉即可。

<div id="top">
<div>

<div class="container">
    <div class="row">
	    <div class="col-md-12">
			<div id="nav">
				<ul>
					<li>
						<a href="#"> 首 页 </a>
					</li>
					<li>
						<a href="#">产品中心</a>
					</li>
					<li>
						<a href="#">品牌中心</a>
					</li>
					<li>
						<a href="#">技术文章</a>
					</li>
					<li>
						<a href="#">联系方式</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>

接下来就是CSS样式布局了，没什么好说的，自己看代码吧。无非就是给导航栏加背景颜色显得更直观一些，在每个选项两边加上竖线，然后就是设置每个选项的超链接去掉下划线、字体颜色。最重要的一点就是，当页面下拉到导航栏之后，再往下拉，导航栏就要固定住了，此时就要用navcss这个样式来固定上边距为0。

#nav {
	width: 100%;
	background-color: #062C33
}

#nav ul {
	height: 42px;
	width: 1000px;
	margin: 0 auto;
}

#nav ul li {
	float: left;
	list-style: none;
	display: inline;
}

#nav ul li a {
	border-left: 1px solid #014a52;
	display: block;
	height: 42px;
	line-height: 42px;
	color: #fff;
	font-size: 18px;
	text-decoration: none;
	padding: 0 30px;
}

.navcss {
	position: fixed;
	top: 0px;
}

最后就是核心代码js部分啦：

$(document).ready(function() {
	$(window).scroll(function() {
		if($(window).scrollTop() > $("#top").height()) {
			$("#nav").addClass("navcss");
		} else {
			$("#nav").removeClass("navcss");
		}
	})
})

$(window).scrollTop() > $("#top").height()对于这条语句，讲的是判断下拉条的顶端位置和top这个div的起始高度进行对比，如果下拉条顶端位置等于小于div起始高度，就把navcss这个样式添加进来，否则就移除这个样式，所以就体现出了导航栏固定在页面顶端的特效。

总体就这些，算是比较简单的方法了，但不保证各个浏览器对这种方法的兼容性，但至少小博在谷歌和2345浏览器是完美运行的啦！