[前端] 滚动监听导航效果

来源：互联网发布：云校排课软件下载编辑：程序博客网时间：2024/06/05 07:40

一、依赖：引用jQuery框架

二、要点：$(window).scroll(function() { // 判断$(this).scrollTop()的滚动高度是否大于某个div的距顶高度 });

三、代码：

<!DOCTYPE HTML><html> <head>  <title>导航定位</title>  <meta charset="utf-8">  <meta name="Generator" content="EditPlus">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <script src="jquery.min.js"></script> </head>   <style type="text/css">      * {         margin:0px;         padding:0px;         font-family:'微软雅黑';      }      div {         height:400px;         border:1px solid red;         width:600px;      }      ul {         overflow:hidden;         position:fixed;         top:300px;         left:650px;      }      li {         width:40px;         height:40px;         background:#3F883E;         text-align:center;         line-height:40px;         color:#fff;         ,font-size:18px;         cursor:pointer;         border-bottom:1px solid #fff;      }      li.active {         width: 38px;         height: 38px;         margin-bottom: 1px;         border: 1px solid #3F883E;         background: #fff;         color: #666;      }   </style> <body>   <div class="div1">段落1</div>   <div class="div2">段落2</div>   <div class="div3">段落3</div>   <div class="div4">段落4</div>   <div class="div5">段落5</div>   <div class="div6">段落6</div>   <div class="div7">段落7</div>   <ul>      <li class="li1 active">1</li>      <li class="li2">2</li>      <li class="li3">3</li>      <li class="li4">4</li>      <li class="li5">5</li>      <li class="li6">6</li>      <li class="li7">7</li>   </ul>      <script type="text/javascript">   /* 滚动监听 */      // 定义一个获取所有div的距离高度      var arrOffsetTop = [         $('.div1').offset().top,         $('.div2').offset().top,         $('.div3').offset().top,         $('.div4').offset().top,         $('.div5').offset().top,         $('.div6').offset().top,         $('.div7').offset().top      ];      // 获取每个div的平均高度      var fTotalHgt = 0;      for(var i=0; i<$('div').length; i++) {         fTotalHgt += $('div').eq(i).outerHeight();      }      var fAverageHgt = parseFloat(fTotalHgt / $('div').length);      // 滚动事件(每次滚动都做一次循环判断)      $(window).scroll(function() {         for(var i=0; i<$('div').length; i++) {            if($(this).scrollTop() > arrOffsetTop[i] - fAverageHgt) {  // 减去一个固定值，是定位准确点               $('ul li').eq(i).addClass('active').siblings().removeClass('active');            }         }      });   /* 点击事件 */      $('ul li').click(function() {         $(this).addClass('active').siblings().removeClass('active');         $('body, html').animate({scrollTop: arrOffsetTop[$(this).index()]}, 500);      });   </script> </body></html>

四、效果图：

总结：

这是一个滚动监听事件效果，附加一个点击监听，仅供参考，复制可用

如果疑问，敬请留言，以便解决。

谢谢关注！

0 0