Bootstrap 4 fixed navbar that hides until page scrolled up

John Avis by | March 8, 2018 | Bootstrap

Fixed navbars – that stay at the top of the screen at all times – are common and useful, but sometimes annoying as they can block the top part of the page (sometimes obscuring page anchors).
Fixed navbars – that stay at the top of the screen at all times – are common and useful, but sometimes annoying as they can block the top part of the page (sometimes obscuring page anchors).

I like the functionality that I have seen on some websites where the navbar will scroll away as you move down the page, but re-appears as soon as you start scrolling up the page.

To add this functionality to Bootstrap 4 I made the following changes to the Bootstrap 4 navbar.

CSS:

.navbar-outer {
position: relative;
height: 56px;
}
.absolute-top {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 1030
}


jQuery (note two references to the navbar by id, in this example “navbar1”):

$(function () {
var lastPos = $(this).scrollTop();

setInterval(function () {
var thisPos = $(this).scrollTop();
if ($(this).scrollTop() > 1 && thisPos < (lastPos - 2)) {
$("#navbar1").removeClass("absolute-top").addClass("fixed-top");
} else {
if ($(this).scrollTop() <= 1 || thisPos > (lastPos + 2)) {
$("#navbar1").removeClass("fixed-top").addClass("absolute-top");
}
}
lastPos = thisPos;
}, 100);
});


For the HTML markup, several changes are required.

1) Add a div around the Bootstrap 4 navbar:

<div class="navbar-outer">
…navbar code here…
</div>


2) Give the navbar an id, the same as used in the jQuery code (“navbar1” in the sample).

3) Add the class “absolute-top” to the navbar, eg:

<div class="navbar-outer">
<nav id="navbar1" class="navbar navbar-expand-lg navbar-light bg-light absolute-top">
…navbar code here…


Please see the sample below for a demonstration of this.

Demo

Related Posts

Bootstrap

Bootstrap 4 white buttons and input groups with button addons

by John Avis | June 29, 2018

Bootstrap 4.x doesn't give you white buttons by default, but sometimes white buttons look better, particularly for something like a search box using an input group with button addon placed on a navbar.


Bootstrap

Improving Bootstrap 4 modals on small screens

by John Avis | June 27, 2018

Bootstrap modals are great but on small screens they take up more valuable space than necessary.


Bootstrap Responsive Web Design

Responsive collapsing search filters in Bootstrap 4

by John Avis | March 26, 2018

In responsive design there are times when on a mobile screen you want to hide some options with a button to show them, but on a large screen always show these options.

Comments

There are no comments yet. Be the first to leave a comment!

Leave a Comment
Tags
ASP.NET Html Forms ASP.NET MVC ASP.NET Web Forms ASP.NET Web Pages Bootstrap C# Classic ASP Cool Websites Databases eBay and PayPal Electrical Repairs General Hardware HTML/CSS Jquery/Javascript Media Center Mobile Phones Responsive Web Design SEO and Social Networking Web Design Web Development Web Security web+db Website Hosting Windows XP Youtube

About me

...mostly about web development and programming, with a little bit of anything else related to the Internet, computers and technology.

Subscribe

Get the latest posts delivered to your inbox.