您的位置：首页 > Web前端 > JQuery

jquery实现固定导航栏

2019-01-29 17:42 375 查看
版权声明：转载本文，请附录原文地址，如果错误，请联系我。 https://blog.csdn.net/qq_19880197/article/details/86693276

HTML

[code]<body>
<div class="top" id="topPart">
<img src="images/top.png" alt="">
</div>
<div class="banner" id="bannerPart">
<img src="images/barnner.png" alt="">
</div>
<div class="main" id="mainPart">
<img src="images/main.png" alt="">
</div>
</body>

CSS

[code]*{
padding: 0;
margin: 0;
}
.top{
vertical-align: top;
}
.main{
width: 1000px;
margin: 0 auto;
padding-top: 10px;

}
.fixed{
position: fixed;
top: 0;
left: 0;
}

jquery

[code] <script src="jQuery/jquery-1.12.3.js"></script>
<script>
$(function () {
// 判断卷去的高度超过topPart的高度
// 1.让bannerPart有固定定位
// 2.让mainPart有一个magin-top
$(window).scroll(function () {
if($(window).scrollTop()>=$(".top").height()){
$(".banner").addClass("fixed");
$(".main").css("marginTop",$(".banner").height()+10);
} else {
$(".banner").removeClass("fixed");
$(".main").css("marginTop",10);
}
});
});
</script>

 

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航