在boostrap導航欄上滾動時添加水平線

Question

當我滾動頁面時，需要向boostrap導航欄添加水平線。簡單地說，當頁面加載和導航欄位於頂部時，行應該不可見，但是當用戶向下滾動頁面時，我需要有可見的導航欄底部行。

我知道可以通過各種庫文件來實現這個目標，比如路點等等，但是我正在尋找最簡單和最簡單的方法，最理想的方式就是使用jquery或boostrap。

謝謝:)

Answer 1

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

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

假設你的導航欄有 「導航欄」 的ID。

無論何時向上滾動多於1個像素，您都可以在導航欄中添加一個「滾動」類，然後您可以在CSS中進行樣式設置。當您返回到頁面頂部時，它也會消失。