html部分
<body>
<h1>1</h1>
<h1>2</h1>
<h1>1</h1>
<h1>2</h1>
<div class="top">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</div>
</body>
css部分
<style>
.top{
width:100%;
height:50px;
background:green;
}
.top ul li{
list-style:none;
display:inline-block;
margin-right:100px;
line-height:50px;
}
a{
color:gray;
text-decoration:none;
}
/*动态使用 */
.navbar-fixed-top{
position:fixed;
top:0;
left:0;
}
</style>
js
<script>
$(function(){
var banOffTop=$(".top").offset().top;//获取到距离顶部的垂直距离
var scTop=0;//初始化垂直滚动的距离
$(document).scroll(function(){
scTop=$(this).scrollTop();//获取到滚动条拉动的距离
console.log(scTop);//查看滚动时，垂直方向上，滚动条滚动的距离
if(scTop>=banOffTop){
//核心部分：当滚动条拉动的距离大于等于导航栏距离顶部的距离时，添加指定的样式
$(".top").addClass("navbar-fixed-top");
}else{
$(".top").removeClass("navbar-fixed-top");
}
})
})
</script>
注意：如果css中设置的height:100%，则这个滚动无效果
网友评论