上に固定されたナビバー

Question

スクロール後にナビバーを上に固定したい。リンク先ページのスクロール後にナビゲーションバーを修正したい。スクロールでクラスを検出してクラス1の後に固定することは可能ですか？

https://codepen.io/shahil/pen/VmXmpE

$(window).scroll(function(){ 
 
    var sticky = $('nav'), 
 
     scroll = $(window).scrollTop(); 
 

 
    if (scroll >= 100) sticky.addClass('fixed'); 
 
    else sticky.removeClass('fixed'); 
 
});

html,body { height:100%; } 
 
.one,.two,.three { min-height:100%; } 
 

 
nav { background:green; } 
 

 
.fixed { 
 
    background:red; 
 
    position: fixed; 
 
    top:0; left:0; 
 
    width: 100%; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="one"> 
 
    <nav> 
 
    NAVBAR 
 
    </nav> 
 
    1 
 

 
</div> 
 
<div class="two"> 
 
    2 
 
</div> 
 
<div class="three"> 
 
    3 
 
</div>

Answer 1

あなたはそのためのプラグインを使用して、心をいけない場合は、ここにあなたのソリューションです。

Sticky JS

スティッキーあなた ページ上の任意の要素が常に表示さ滞在する能力を与えるjQueryプラグインです。