在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中进行样式设置。当您返回到页面顶部时，它也会消失。