スクロールバーに従ってスライドするナビゲーションバー

まず簡単に原理を話します:ブラウザのスクロールバーの距離を監視して、一定の長さより大きい時、ナビゲーションバーに“position:fixed”を追加して、小さいならキャンセルして、同時にanimateのカスタマイズした透明度のグラデーションの移行を追加しました!今ウェブページも流行っている効果
関連するjQueryコードセグメント:
 

  
  
  
  

   
   
   
   
$(window).scroll(function(){  
   
   
   
   
   
   
   
   
   
    var scrollTop = $(window).scrollTop();  
   
   
   
   
   
   
   
   
   
    if(scrollTop > 66)  
   
   
   
   
   
   
   
   
   
        $('#menu').css({position:'fixed',top:'0px'}).stop().animate({'opacity':'0.8'},400);  
   
   
   
   
   
   
   
   
   
    else  
   
   
   
   
   
   
   
   
   
        $('#menu').css({position:'static'}).stop().animate({'opacity':'1'},400);  
   
   
   
   
   
   
   
   
   
});  
   
   
   
   
   
   
   
   
   
$('#menu').hover(function(){  
   
   
   
   
   
   
   
   
   
    var scrollTop = $(window).scrollTop();  
   
   
   
   
   
   
   
   
   
    if(scrollTop > 66){  
   
   
   
   
   
   
   
   
   
        $('#menu').stop().animate({'opacity':'1'},400);}  
   
   
   
   
   
   
   
   
   
    },function(){  
   
   
   
   
   
   
   
   
   
    var scrollTop = $(window).scrollTop();  
   
   
   
   
   
   
   
   
   
    if(scrollTop > 66){  
   
   
   
   
   
   
   
   
   
        $('#menu').stop().animate({'opacity':'0.8'},400);  
   
   
   
   
   
   
   
   
   
    }  
   
   
   
   
   
   
   
   
   
}); 
  
  
  
  

コードの中の#menuは自分のナビゲーションバーのIDに変更する必要があります.また、ナビゲーションバー全体をdivで包んで、ナビゲーションバーと同じ高さのheightステーションを追加して、ナビゲーション直後の要素が直接飛び上がって上書きされないようにしてください.また、ナビゲーションにz-index:9999層の設定を追加します.