首页>>导航菜单>>左侧浮动菜单，跟谁鼠标滚动(2018-08-19)

左侧浮动菜单，跟谁鼠标滚动

左侧浮动菜单，跟谁鼠标滚动
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="nav">nav</div>  
  2. <div class="banner">banner</div>  
  3. <div class="box">  
  4.     <ul class="fl_l" style="position: fixed; top: 10px;">  
  5.         <li class=""><a href="##">菜单1</a></li>  
  6.         <li class="active"><a href="##">菜单2</a></li>  
  7.         <li><a href="##">菜单3</a></li>  
  8.         <li><a href="##">菜单4</a></li>  
  9.     </ul>  
  10.     <ul class="fl_r">  
  11.         <li style="height: 600px;">菜单1内容</li>  
  12.         <li style="height: 600px;">菜单2内容</li>  
  13.         <li style="height: 400px;">菜单3内容</li>  
  14.         <li style="height: 500px;">菜单4内容</li>  
  15.     </ul>  
  16.     <div style="clear: both;"></div>  
  17. </div>  

 

JavaScript Code
  1. <script type="text/javascript">  
  2.     $(function(){  
  3.         //设置标杆  
  4.         var _line=parseInt($(window).height()/3);  
  5.         $(window).scroll(function(){  
  6.             //滚动730px，左侧导航固定定位  
  7.             if ($(window).scrollTop()>730) {  
  8.                 $('.fl_l').css({'position':'fixed','top':10})  
  9.             }else{  
  10.                 $('.fl_l').css({'position':'','top':''})  
  11.             };  
  12.             $('.fl_l li').eq(0).addClass('active');  
  13.             //滚动到标杆位置,左侧导航加active  
  14.             $('.fl_r li').each(function(){  
  15.                 var _target=parseInt($(this).offset().top-$(window).scrollTop()-_line);  
  16.                 var _i=$(this).index();  
  17.                 if (_target<=0) {  
  18.                     $('.fl_l li').removeClass('active');  
  19.                     $('.fl_l li').eq(_i).addClass('active');  
  20.                 }  
  21.                 //如果到达页面底部，给左侧导航最后一个加active  
  22.                 else if($(document).height()==$(window).scrollTop()+$(window).height()){  
  23.                     $('.fl_l li').removeClass('active');  
  24.                     $('.fl_l li').eq($('.fl_r li').length-1).addClass('active');  
  25.                 }  
  26.             });  
  27.         });  
  28.         $('.fl_l li').click(function(){  
  29.             $(this).addClass('active').siblings().removeClass('active');  
  30.             var _i=$(this).index();  
  31.              $('body, html').animate({scrollTop:$('.fl_r li').eq(_i).offset().top-_line},500);  
  32.         });  
  33.     });  
  34. </script>  

 


原文地址:http://www.freejs.net/article_daohangcaidan_672.html