使用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浏览器是完美运行的啦!