导航的滚动监听实现步骤

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>导航的滚动监听实现步骤</title>
       <style type="text/css">
           *{margin: 0;padding: 0;}
           #box_ul{width: 600px; height: 50px; padding: 0; position: fixed; left: 0; right: 0; margin: 0 auto;}
           #box_ul li{width: 150px; box-sizing: border-box; line-height: 50px; border: 1px solid darkorchid; text-align: center; float: left;padding:0;margin:0;list-style:none}
           .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
            .clearfloat{zoom:1}
            .active{background: red;}
       </style>
   </head>
   <body onscroll="scroll()">
           <ul id="box_ul">
               <li class="box_1 active">box_1</li>
               <li class="box_2">box_2</li>
               <li class="box_3">box_3</li>
               <li class="box_4">box_4</li>
           </ul>
       <div class="box clearfloat">
           <div class="intro_1 boxs" style="width: 100%; height: 600px; border: 1px solid aquamarine;">box_1</div>
           <div class="intro_2 boxs" style="width: 100%; height: 600px; border: 1px solid saddlebrown;">box_2</div>
           <div class="intro_3 boxs" style="width: 100%; height: 600px; border: 1px solid seagreen;">box_3</div>
           <div class="intro_4 boxs" style="width: 100%; height: 600px; border: 1px solid seagreen;">box_4</div>
       </div>
       <script src="jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
       <script type="text/javascript">
//           #contact 想定位的div
//           scrollTop>>设置div元素滚动条的偏移
//           $("html,body").animate({scrollTop: $("#contact").offset().top}, 600);

// .active可以在css中为它设置样式

           //获取所有div的高度
           var arrOffsetTop = [$('.intro_1').offset().top,$('.intro_2').offset().top,$('.intro_3').offset().top,$('.intro_4').offset().top]
           var fTotalHgt = 0;
//           console.log(arrOffsetTop)
           for(var i=0; i<$('.boxs').length; i++){
               fTotalHgt += $('.boxs').eq(i).outerHeight();
               console.log(fTotalHgt)
           }

           var fAverageHgt = parseFloat(fTotalHgt / $('boxs').length); // 滚动事件(每次滚动都做一次循环判断)
           $(window).scroll(function() {
               for(var i = 0; i < $('boxs').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>

导航的滚动监听实现步骤

猜你喜欢