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

Question

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>

The purpose of "fixed" is to keep it in place when scrolling. So why not remove `fixed-top` instead? — Cue, Jan 12 '19 at 22:29
I want to keep it fixed but want it to disappear during the scrolling process after a certain amount has been scrolled. For example, after 700px down the page I want the navbar to disappear. — Emanuel, Jan 12 '19 at 22:44

joshmoto · Accepted Answer · 2019-01-16T13:40:56.587

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

That's what happens when you elaborate as much as you have but I much prefer this visually working version in all honesty. Good example. — Cue, Jan 12 '19 at 22:58
@Cue thanks man, though i learnt a lot from your code. Did not know you could use jQuery functions like that, clever! — joshmoto, Jan 12 '19 at 23:13

Cue · Answer 2 · 2019-01-13T22:19:24.460

5

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

edited Jan 13 '19 at 22:19

answered Jan 12 '19 at 22:48

Cue

2,699
1
12
13

Thank you, that worked, but how can I make it less choppy and more of a fade out? – Emanuel Jan 12 '19 at 22:57
See @joshmoto example [here](https://stackoverflow.com/a/54164631/2150268) – Cue Jan 12 '19 at 22:59
2

perhaps `.toggleClass( className, state )` could be used instead: _A Boolean (not just truthy/falsy) value to determine whether the class should be added or removed._ – ajax333221 Jan 13 '19 at 18:29
@ajax333221 updated to reflect your suggestion. thanks! – Cue Jan 13 '19 at 22:19

score -1 · Answer 3 · answered Jan 12 '19 at 22:40

-1

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.

answered Jan 12 '19 at 22:40

Heather Chloe

51
2
10

fixed-top keeps the navbar at the top of the browser when scrolling. I want to keep it at the top but I want it to disappear using jquery after scrolling certain length down the page – Emanuel Jan 12 '19 at 22:43
Accepted answer: https://stackoverflow.com/questions/21561480/trigger-event-when-user-scroll-to-specific-element-with-jquery – Heather Chloe Jan 12 '19 at 22:45

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

3 Answers3

Linked