CODEWITHSUNDEEP
jquerytwitter-bootstrapbootstrap-4
Emanuel
Emanuel

Reputation: 79

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>

Upvotes: 3

Views: 21411

Answers (3)

joshmoto
joshmoto

Reputation: 5088

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

Upvotes: 17

Cue
Cue

Reputation: 2759

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);
})

Upvotes: 5

Heather Chloe
Heather Chloe

Reputation: 51

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.

Upvotes: -1

Related Questions