web移动端实现点击导航，滑动到网页中的指定位置（JS实现滑动锚点定位）
主要功能：
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>
