将 Bootstrap 导航栏设置为粘性

Question

所以我想使用 Bootstrap 制作一个导航栏然后当你向下滚动超过 150 像素时导航栏有一个稍微透明的背景我在 Whosebug 上找到的所有例子都不是什么我需要：/我知道如何使用 jQuery 添加 classes 等等，当你向下滚动到一定高度时，但我希望 Navbar 淡出然后淡入不同的 class 但我还没有找到办法做到这一点。

非常感谢您的帮助:)

谢谢，
Ste

答案： 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

您在使用 jQuery 吗？如果是这样，也许是这样的？

$('#div').click(() => {
    $('#div').fadeOut();


  $('#div')
  .css('background-color', 'green')
  .fadeIn();

});

https://jsfiddle.net/53n2o76g/

Answer 2

您只需 css 过渡即可实现淡入淡出，您需要做的就是在 window 达到 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);
}

过渡属性可以让您淡入和淡出，然后您可以将 navbar-default 的背景更改为任何您想要的背景。当它达到 150px 时，它将切换滚动 class 并更改背景。

Answer 3

我有一个困难的解决方案。您可以创建两个 navbar。第二个 nav 应该被隐藏。当你 scroll 多于 150px，那么它应该是 fade in 固定位置。在我的 jQuery 代码下方是

$(window).scroll(function(){
    var scrolled = $(window).scrollTop();
    if(scrolled>149){
       $('#second_nav').fadeIn();
    }
    else{
        $('#second_nav').fadeOut();
    }
});

下面代码是第一个导航

<nav class="navbar navbar-default">

代码下方是第二个导航。

<nav class="navbar navbar-default navbar-fixed-top" id="second_nav">

在 jsfiddle

上查看我的现场演示

将 Bootstrap 导航栏设置为粘性

Make the Bootstrap Navbar Sticky

html

javascript

css

jquery

twitter-bootstrap