主要功能：
1.初始页面隐藏导航栏
2.滑动到一定位置导航栏显示
3.滑动到对应模块导航栏对应加上样式
4.有锚点，点击导航栏滑动到对应内容
效果图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<style>
*{margin: 0;padding: 0;font-size: 30px;text-align: center;}
.header{height: 100px;width: 640px;margin: 0 auto; background: #fff;position: fixed;top: 0;left: 0;right: 0;}
.wrap{width: 640px;margin: 0 auto; height: 300px;background: #33CD00;}
.wrap-content{width: 640px;margin: 0 auto;}
/*导航栏*/
.wc-nav{width: 640px; background: #fff;position: fixed; height: 90px;line-height: 90px;top: 85px;font-size: 27px;z-index: 999;opacity: 0;box-shadow: 0px 15px 15px -15px rgb(200 200 200 / 60%);}
.wn-item{display: flex;justify-content: space-between;align-items: center;margin: 0 30px;}
.wc-nav a{color: #333;font-weight: bold; text-decoration: none;-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-user-select: none;-moz-user-focus: none;-moz-user-select: none;position: relative;text-shadow: 4px 4px 6px rgba(0,0,0,0.1)}
.wc-nav a span{position: absolute;top: -20px;right: -34px;font-size: 15px;color:#FF631D;}
.fixDiv{opacity: 1;}
.fixDivnone{opacity: 0;}
.wc-nav .active{color:#FF631D;position: relative;}
.wc-nav .active::before {content: '';height: 3px;width: 60px;border-radius: 3px;background: -webkit-linear-gradient(right,#FE6F1E,#FE8E17);
position: absolute;margin-top: 74px;left: 22%;}
.wcc-list{height: 500px;border: 1px solid red;background: #90EE90;}
.wrap-foot{height: 1000px;background: #269ABC;width: 640px;margin: 0 auto;}
</style>
</head>
<body>
<div class="header">吸顶头部</div>
<div style="height: 100px;width: 640px;margin: 0 auto;"></div>
<div class="wrap"></div>
<!--内容-->
<div class="wrap-content">
<!--导航-->
<div class="wc-nav" id="sort_menus">
<div class="wn-item">
<a href="#a" class='active'>限时抢购</a>
<a href="#b">实惠之选</a>
<a href="#c">品质之选</a>
<a href="#d">高端定制</a>
</div>
</div>
<!--内容-->
<div class="wc-content">
<!-- 设置暗锚点 -->
<a name="a" style="position: relative;top: -180px;display: block;height: 0;overflow: hidden;"></a>
<!--限时抢购-->
<div id="a1" class="wcc-list wcc-list-item">第一部分内容</div>
<!-- 设置暗锚点 -->
<a name="b" style=" position: relative;top: -180px;display: block;height: 0;overflow: hidden;"></a>
<!--实惠之选-->
<div id="a2" class="wcc-list" style="background: #78B787;">第二部分内容</div>
<!-- 设置暗锚点 -->
<a name="c" style=" position: relative;top: -180px;display: block;height: 0;overflow: hidden;"></a>
<!--品质之选-->
<div id="a3" class="wcc-list" style="background: #07BA9F;">第三部分内容</div>
<!-- 设置暗锚点 -->
<a name="d" style=" position: relative;top: -180px;display: block;height: 0;overflow: hidden;"></a>
<!--高端定制-->
<div id="a4" class="wcc-list" style="background: #808080;">第四部分内容</div>
</div>
</div>
<div class="wrap-foot"></div>
<script>
$(window).scroll(function(event){
checkscroll()
});
function checkscroll(){
var winPos = $(window).scrollTop()+182; //屏幕位置
var NodePos = [$('#a1').offset().top,$('#a2').offset().top,$('#a3').offset().top,$('#a4').offset().top],//提前获取好元素位置
length = NodePos .length;
if(winPos>=NodePos[0]&&winPos<=NodePos[1]){
$('.wc-nav a').removeClass('active');
$('.wc-nav a:nth-child(1)').addClass('active');
}else if(winPos>=NodePos[1]&&winPos<=NodePos[2]){
$('.wc-nav a').removeClass('active');
$('.wc-nav a:nth-child(2)').addClass('active');
}else if(winPos>=NodePos[2]&&winPos<=NodePos[3]){
$('.wc-nav a').removeClass('active');
$('.wc-nav a:nth-child(3)').addClass('active');
}else if(winPos>=NodePos[3]){
$('.wc-nav a').removeClass('active');
$('.wc-nav a:nth-child(4)').addClass('active');
}
}
$(function(){
var scTop=0;//初始化垂直滚动的距离
$(document).scroll(function(){
scTop=$(this).scrollTop();//获取到滚动条拉动的距离
console.log(scTop);//查看滚动时，垂直方向上，滚动条滚动的距离
if(scTop>=200){
//核心部分：当滚动条拉动的距离大于等于导航栏距离顶部的距离时，添加指定的样式
$("#sort_menus").addClass("fixDiv");
}else{
$("#sort_menus").removeClass("fixDiv");
}
});
})
</script>
</body>
</html>
标签：web,wc,NodePos,top,height,nav,滑动,JS,margin From： https://www.cnblogs.com/-mrl/p/16851343.html