ブーストラバーのナビゲーションバーのスクロールに水平線を追加

Question

ページをスクロールするときに、ブーストラップのナビゲーションバーに水平線を追加する必要があります。簡単に言えば、ページが読み込まれ、ナビバーが一番上に表示されているとき、行は表示されませんが、ユーザーがページを下にスクロールすると、ナビゲーションバーの下に表示される必要があります。

ウェイポイントなどのさまざまなライブラリを使用してこれを実現することは可能ですが、私は最も簡単でクリーンな方法を探しています。理想的にはjqueryまたはboostrapだけです。

ありがとうございました:)

Answer 1

<style> 
    .scrolled {border-bottom:1px solid #000;}  
</style> 

$(document).scroll(function(){ 
    $('#navbar').toggleClass('scrolled', $(this).scrollTop() > 1); 
}); 

をあなたのナビゲーションバーには、 "ナビゲーションバー" のIDを持っていると仮定します。

これは、1ピクセル以上スクロールするといつでもnavbarに「スクロール」されたクラスを追加し、CSSでスタイルを設定できます。また、ページの上部に戻ると消えます。