jQuery实现固定顶部定位滚动导航效果代码

最新推荐文章于 2021-09-13 21:15:18 发布

zyu67

最新推荐文章于 2021-09-13 21:15:18 发布

阅读量3.6k

点赞数

分类专栏： jquery js

本文链接：https://blog.csdn.net/zyu67/article/details/43274111

版权

js 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

jquery

10 篇文章 0 订阅

订阅专栏

jQuery实现固定顶部 定位滚动导航效果代码，很常见的效果，非常实用；滚动滚动条时，导航固定顶部，并且滚动到对应的板块时，当前导航高亮显示；点击导航文字时平滑跳转到对应的板块。
 
 $( 
 function 
 (){      
 
      
 var  
 subNav_active = $( 
 ".adv_active" 
 );     
 
      
 var  
 subNav_scroll =  
 function 
 (target){     
 
          
 subNav_active.removeClass   ( 
 "adv_active" 
 );     
 
          
 target.parent().addClass( 
 "adv_active" 
 );     
 
          
 subNav_active = target.parent();     
 
      
 };     
 
      
 $( 
 "#subNav a" 
 ).click( 
 function 
 (){     
 
          
 subNav_scroll($( 
 this 
 ));     
 
          
 var  
 target = $( 
 this 
 ).attr( 
 "href" 
 );     
 
          
 var  
 targetScroll = $(target).offset().top - 80;     
 
          
 $( 
 "html,body" 
 ).animate({scrollTop:targetScroll},300);     
 
          
 return  
 false 
 ;     
 
      
 });     
 
      
 //页面跳转时定位     
 
      
 if 
 (window.location.hash){     
 
          
 var  
 targetScroll = $(window.location.hash).offset().top - 80;     
 
          
 $( 
 "html,body" 
 ).animate({scrollTop:targetScroll},300);     
 
      
 }     
 
      
 $(window).scroll( 
 function 
 (){     
 
          
 var  
 $ 
 this  
 = $( 
 this 
 );     
 
          
 var  
 targetTop = $( 
 this 
 ).scrollTop();     
 
          
 var  
 footerTop = $( 
 "#footer" 
 ).offset().top;     
 
          
 var  
 height = $(window).height();     
 
          
 if  
 (targetTop >= 520){     
 
              
 $( 
 "#subNav" 
 ).addClass( 
 "fixedSubNav" 
 );     
 
              
 $( 
 ".empty-placeholder" 
 ).removeClass( 
 "hidden" 
 );     
 
          
 } 
 else 
 {     
 
              
 $( 
 "#subNav" 
 ).removeClass( 
 "fixedSubNav" 
 );     
 
              
 $( 
 ".empty-placeholder" 
 ).addClass( 
 "hidden" 
 );     
 
          
 }     
 
          
 if 
 (targetTop < 750){     
 
              
 subNav_scroll($( 
 ".adv_door" 
 ));     
 
          
 } 
 else  
 if 
 (targetTop > 1200 && targetTop < 1640){     
 
                  
 subNav_scroll($( 
 ".adv_source" 
 ));     
 
          
 } 
 else  
 if 
 (targetTop > 2314 && targetTop < 2734){     
 
                  
 subNav_scroll($( 
 ".adv_price" 
 ));     
 
          
 } 
 else  
 if 
 (targetTop > 2968 && targetTop < 3268){     
 
                  
 subNav_scroll($( 
 ".adv_transfer" 
 ));     
 
          
 } 
 else  
 if 
 (targetTop > 3327 && targetTop < 3627){     
 
                  
 subNav_scroll($( 
 ".adv_payment" 
 ));     
 
          
 } 
 else  
 if 
 (targetTop > 3651 && targetTop < 4071){     
 
                  
 subNav_scroll($( 
 ".adv_promise" 
 ));     
 
          
 } 
 else  
 if 
 (targetTop > 4163 && targetTop < 4473){     
 
                  
 subNav_scroll($( 
 ".adv_ride" 
 ));     
 
          
 } 
 else  
 if 
 (targetTop > 4580){     
 
              
 subNav_scroll($( 
 ".adv_finance" 
 ));     
 
          
 }     
 
      
 })     
 }());
                