在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为“navbar”。

每当您向下滚动超过1个像素时，这将向导航栏添加一个“滚动”类，然后您可以在CSS中设置样式。当您返回页面顶部时，它也会消失。