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

最新推荐文章于 2022-10-25 16:19:23 发布

天空还下着雪

最新推荐文章于 2022-10-25 16:19:23 发布

阅读量3.7k

点赞数 1

分类专栏：前端文章标签： jquery web前端开发

本文链接：https://blog.csdn.net/u010081689/article/details/45172459

版权

前端专栏收录该内容

154 篇文章 0 订阅

订阅专栏

一、依赖：引用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>

四、效果图：

总结：

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

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

欢迎关注技术开发分享录：http://fenxianglu.cn/

天空还下着雪

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
1
评论
[前端] 滚动监听导航效果

一、依赖：引用jQuery框架二、要点：$(window).scroll(function() { // 判断$(this).scrollTop()的滚动高度是否大于某个div的距顶高度 });三、代码：<!DOCTYPE HTML><html> <head> <title>导航定位</title> &lt...
复制链接

扫一扫