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