本文主要是介绍使用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浏览器是完美运行的啦！
这篇关于使用js实现导航窗格在页面下拉以后固定在页面顶端的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
