关注小编微信公众号公众号【前端基础教程从0开始】回复“1”，拉你进程序员技术讨论群，群内有大神，可以免费提供问题解答。公众号回复“小程序”，领取300个优秀的小程序开源代码+一套入门教程。公众号回复“领取资源”，领取300G前端，Java，产品经理，微信小程序，Python等资源合集大放送，让我们一起学前端。
文章所需资源链接：
百度网盘链接：
https://pan.baidu.com/s/1Fix_2deegkKIFTPCv2r47A
提取码：zl53
百度网盘地址二维码：
直接上代码！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.header{
height: 70px;
background:blue;
width: 100%;
font-size: 30px;
}
.nav1 {
height: 50px;
background: red;
width: 100%;
font-size: 30px;
}
.content1{
height: 500px;
background:yellow;
width: 100%;
font-size: 30px;
}
.nav2 {
height: 50px;
background: red;
width: 100%;
font-size: 30px;
}
.content{
height: 500px;
background:yellow;
width: 100%;
font-size: 30px;
}
</style>
</head>
<body>
<div class="header">这是顶部</div>
<div class="nav1">这是导航栏1</div>
<div class="content1">这是内容</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div class="nav2">这是导航栏2</div>
<div class="content2">这是内容</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<script src="jquery-1.12.3.min.js"></script>
<script type="text/javascript">
// 获取导航栏到屏幕顶部的距离
var oTop1 = $(".nav1").offset().top;
var oTop2 = $(".nav2").offset().top;
//获取导航栏的高度，此高度用于保证内容的平滑过渡
var martop1 = $('.nav1').outerHeight();
var martop2 = $('.nav2').outerHeight();
var sTop = 0;
// 监听页面的滚动
$(window).scroll(function () {
// 获取页面向上滚动的距离
sTop = $(this).scrollTop();
// 当导航栏到达屏幕顶端
if (sTop >= oTop1) {
// 修改导航栏position属性，使之固定在屏幕顶端
$(".nav1").css({ "position": "fixed", "top": "0" });
// 修改内容的margin-top值，保证平滑过渡
$(".content1").css({ "margin-top": martop1 });
} else {
// 当导航栏脱离屏幕顶端时，回复原来的属性
$(".nav1").css({ "position": "static" });
$(".content1").css({ "margin-top": "0" });
}
if (sTop >= oTop2) {
// 修改导航栏position属性，使之固定在屏幕顶端
$(".nav2").css({ "position": "fixed", "top": "0" });
// 修改内容的margin-top值，保证平滑过渡
$(".content2").css({ "margin-top": martop2 });
} else {
// 当导航栏脱离屏幕顶端时，回复原来的属性
$(".nav2").css({ "position": "static" });
$(".content2").css({ "margin-top": "0" });
}
});
</script>
</body>
</html>
总结
以上所述是我给大家介绍的导航栏吸附效果实现Demo，希望对大家有所帮助，如果大家有任何疑问请给我留言，我会及时回复大家的。转载请附上源码地址!
作者微信：欢迎大家交流
76
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
