html部分:
<body>
<h1>标题1</h1>
<h1>标题2</h1>
<h1>标题1</h1>
<h1>标题2</h1>
<div class="banner">
<ul>
<li><a href="#">标题1</a></li>
<li><a href="#">标题1</a></li>
<li><a href="#">标题1</a></li>
<li><a href="#">标题1</a></li>
<li><a href="#">标题1</a></li>
</ul>
</div>
<img src="1.jpg">
</body>
css部分：
<style>
html,body{
width:100%;
}
.banner{
width:100%;
height:50px;
background:pink;
}
.banner ul li{
list-style:none;
display:inline-block;
margin-right:100px;
line-height:50px;
}
a{
color:gray;
text-decoration:none;
}
//下面这个类为动态添加的类
.fixDiv{
position:fixed;
top:0;
left:0;
}
</style>
js部分：
<script>
$(function(){
var banOffTop=$(".banner").offset().top;//获取到距离顶部的垂直距离
var scTop=0;//初始化垂直滚动的距离
$(document).scroll(function(){
scTop=$(this).scrollTop();//获取到滚动条拉动的距离
//console.log(scTop);查看滚动时，垂直方向上，滚动条滚动的距离
if(scTop>=banOffTop){
//核心部分：当滚动条拉动的距离大于等于导航栏距离顶部的距离时，添加指定的样式
$(".banner").addClass("fixDiv");
}else{
$(".banner").removeClass("fixDiv");
}
})
})
</script>
结果：
（1）初始样式：
（2）当滚动到顶部时，导航栏固定在顶部：
216
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
