滚动监听（1） 

<!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-1.11.3.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: rgb(0,255,0);
         ,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: rgb(255,0,0);
      }
   </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">
      // 匹配元素的左上角相对文档左上角的偏移
      var arrOffsetTop = [
         $('.div1').offset().top,
         $('.div2').offset().top,
         $('.div3').offset().top,
         $('.div4').offset().top,
         $('.div5').offset().top,
         $('.div6').offset().top,
         $('.div7').offset().top
      ];

      var fTotalHgt = 0;
      for(var i=0; i<$('div').length; i++) {
         //返回匹配元素的外部高度，包含padding和border，不包含margin
         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');
         //在500ms之内，将body的滚动条滚动到指定位置
         $('body, html').animate({scrollTop: arrOffsetTop[$(this).index()]}, 500);
      });
   </script>

 </body>
</html>

 

posted @ 2017-06-23 17:13  WebNewer  阅读(172)  评论(0)    收藏  举报