Bootstrap 4 - How to make fixed-top navbar disappear on scroll

问题

With Bootstrap 4, how can I make the fixed-top navbar disappear on scroll? I've attached below the html code for the default Bootstrap 4 navbar.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
  <a class="navbar-brand" href="#">Test</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

  <div class="collapse navbar-collapse" id="navbarsExampleDefault">
    <ul class="navbar-nav ml-auto py-md-2">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
    </ul>
  </div>
</nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

回答1:

Cue beat me too it. Similar to his answer but not using short code.

jQuery

// scroll functions
$(window).scroll(function(e) {

    // add/remove class to navbar when scrolling to hide/show
    var scroll = $(window).scrollTop();
    if (scroll >= 150) {
        $('.navbar').addClass("navbar-hide");
    } else {
        $('.navbar').removeClass("navbar-hide");
    }

});

CSS navbar fade out option

Codeply demo https://www.codeply.com/go/rTR1dcn4n6

.navbar {
    opacity: 1;
    transition: opacity 0.5s ease;
}

.navbar-hide {
    pointer-events: none;
    opacity: 0;
}

CSS navbar slide up option

Codeply demo https://www.codeply.com/go/7Fab8Thufl

.navbar {
    transition: top 0.5s ease;
}

.navbar-hide {
    top: -56px;
}

Cue's answer is probably much better if you like less code, here is his method below using my hide class.

Cue's jQuery

// scroll functions
$(window).scroll(function(e) {

    // add/remove class to navbar when scrolling to hide/show
    $('.navbar')[$(window).scrollTop() >= 150 ? 'addClass' : 'removeClass']('navbar-hide');

});

CSS navbar fade out option (same as above)

Codeply demo https://www.codeply.com/go/KPnx8ewEED

CSS navbar slide up option (same as above)

Codeply demo https://www.codeply.com/go/i82vYBGeu7

回答2:

To conditionally remove the fixed positioning of the navbar when you've reached a certain offset (in this example we'll use 150px from top of viewport) then you could do:

$(window).on('scroll', function (e) {
  $('.navbar')[$(window).scrollTop() >= 150 ? 'removeClass' : 'addClass']('fixed-top');
})

As per ajax333221's comment, toggleClass() could also be used:

$(window).on('scroll', function (e) {
  $('.navbar').toggleClass('fixed-top', $(window).scrollTop() < 150);
})

回答3:

Fixed-top forces the navigation to remain fixed to the top of the viewport.

"An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element."

Html elements natively move as you scroll down. If you want the navigation to scroll with the content, then you need to remove this class.

来源：https://stackoverflow.com/questions/54164397/bootstrap-4-how-to-make-fixed-top-navbar-disappear-on-scroll

标签

jquery

twitter-bootstrap

bootstrap-4