javascript - 使 Bootstrap 导航栏具有粘性

Question

所以我想使用 Bootstrap 制作一个导航栏，然后当您向下滚动超过 150 像素时，导航栏的背景略微透明我在 Stackoverflow 上找到的所有示例都不是我需要的:/我知道如何使用 jQuery 添加类等，当您向下滚动到一定高度时，但我希望 Navbar 淡出，然后用不同的类淡入，但我还没有找到一种方法来做到这一点。

我很感激任何帮助:)

谢谢，

回答:jQuery

$(window).on( "scroll", function() {
   $('nav').toggleClass('scrolled navbar-fixed-top', $(this).scrollTop() > 150);
});

CSS

nav.scrolled {
  background: rgba(0,0,0,0.5);
}

nav {
    transition: background-color 0.5s ease;
}

HTML

<nav id="secondNav" class="navbar navbar-default">
    <div class="container-fluid">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Responsive Slider</a>
            </div>
            <div class="collapse navbar-collapse " id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right navText">
                    <li><a href="#">Home</a>
                    </li>
                    <li><a href="#">About Us</a>
                    </li>
                    <li><a href="#">Contact Us</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</nav>

Answer 1

您只需使用 css 转换即可实现淡入淡出，您需要做的就是在窗口达到 150px 时使用 jquery toggleClass 函数。

尝试以下操作:

$(window).on( "scroll", function() {
   $('#secondNav').toggleClass('scrolled', $(this).scrollTop() > 150);
});

和CSS

#secondNav.navbar-default{
  background: #000;
  transition: background-color 0.5s ease;
}
#secondNav.scrolled {
  background: rgba(0,0,0,0.5);
}

transition 属性会为您提供淡入淡出效果，然后您可以将导航栏默认值的背景更改为您想要的任何背景。当它达到 150 像素时，它将切换滚动类并更改背景。