在引导程序导航栏上滚动时添加水平线

Question

我需要在滚动页面时向 boostrap 导航栏添加水平线。简单地说，当页面加载并且导航栏位于顶部时，行不应该可见，但是当用户向下滚动页面时，我需要导航栏的底部可见。

我知道可以通过各种库来实现这一点，例如 waypoints 左右，但我正在寻找最简单明了的方法，最好是使用 jquery 或助推器。

谢谢:)

Answer 1

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

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

假设您的导航栏的 ID 为 "navbar"。

这将在您向下滚动超过 1 个像素时向导航栏添加 class 或 'scrolled'，然后您可以在 CSS 中设置样式。当您 return 到页面顶部时，它也会消失。

在引导程序导航栏上滚动时添加水平线

Add horizontal line on scroll on boostrap navbar

html

css

navbar