Build a Fixed Top Navigation that Disappears as Users Scroll

The sticky or fixed navigation menu is very popular nowadays. However, sticky navigation is more than just a cool web design trend. It's one of the most functional navigation types and offers some great advantages. It makes user navigation easier and content becomes more accessible. eCommerce sites use it to boost retention and goal conversions. 

But, like all design trends, what works for some doesn't work for all -- and sticky top nav is no different. It can obscure content, distract the user, and take up significant space on mobile screens. 

Non-fixed navigation bars help users focus on content, but when it disappears as a user scrolls, navigation becomes cumbersome -- especially on pages with lengthy content. It also forces your audience to spend time scrolling back up to the top of the page to access the navigation menu again. 

If you find yourself between these two design options, let this tutorial be a comfortable middle ground! Today, we're teaching you how to create fixed navigation that disappears as users scroll down AND reappears as they scroll back up the page. We'll show you how to build it using Bootstrap, CSS, and jQuery. First, we start by adding the below external sources to your website:

HTML

Copy and paste the below nav code in your HTML file:

One important thing to pay attention to is the classname used for the nav tag. We used the classname .navbar and we will need to use the same classname in our JQuery code later. It will make the navigation bar hide and appear based on scrolling behavior.

CSS

Here's the complete CSS code that includes navigation bar display and media queries that handle responsive layouts. We have .is-hidden classname which gets added by Javascript to the .navbar class. .is-hidden is used when the scroll down action happens and the navigation bar is hidden. We also supplied a .fixed-top classname to the .navbar to make it fixed.

Let's take a look at what's happening inside this code:

JQuery

$(document).ready(function () { var previousScroll = 0; $(window).scroll(function () { var currentScroll = $(this).scrollTop(); if (currentScroll < 100) { showTopNav(); } else if (currentScroll > 0 && currentScroll < $(document).height() - $(window).height()) { if (currentScroll > previousScroll) { hideNav(); } else { showNav(); } previousScroll = currentScroll; } }); function hideNav() { $(".navbar").removeClass("is-visible").addClass("is-hidden"); } function showNav() { $(".navbar").removeClass("is-hidden").addClass("is-visible").addClass("scrolling"); } });

On line 5, we're saying if the current scroll position is greater than 0 (the top) and the current scroll position is less than the document height minus the window height (the bottom) run the navigation if/else statement.

On line 8, if the current scroll is greater than the previous scroll (i.e we're scrolling down the page), hide the navbar, else if we are scrolling up (i.e the previous scroll is greater than the current scroll), show the navbar.

On line 17, in hideNav() function, we select the navigation bar by its classname as we mentione before. We select the .navbar classname, remove .is-visible class to hide it and add the classname .is-hidden. 

On line 21, we declare the showNav() function. Again, we select the navigation bar by its classname .navbar, remove .is-hidden class to remove its hidden status and add the classname .is-visible. 

And there it is. Our navigation bar will be invisible when we scroll down but whenever we scroll up it will be visible without having to scroll up all the way to the top of the page.