Hide Navigation On Scroll – An easy JavaScript and jQuery solution

January 7, 2022
Beginner, CSS, JavaScript, jQuery

A common website request is to hide the navigation on scroll. This is particularly relevant on mobile, as it frees up important space. To keep easy access to the navigation I usually recommend showing the navigation when scrolling up, so if a visitor wants to move to another page, they don’t have to scroll up all the way.

Note: The prerequisite is, that you already have a sticky header.

You can add this simple snippet to your site to detect every scroll event, scroll direction and add/remove a CSS class. Of course, you can repurpose it to animate any other elements on the page, however, if you want to have multiple scroll animations, I’d probably recommend going with a scrolling library, eg. Scrollmagic.

Below you find the solution – first in vanilla JS, second in jQuery, for your convenience.

It queries the scroll position and compares it to the position from the previous scroll event to determine the scroll direction. By comparing the current position to the scroll direction and a custom offset (in this case 300px), you can add/remove a CSS class. The new class style hides the navigation, including a transition animation.

Vanilla JavaScript vs. jQuery

jQuery is just another JavaScript library, but it makes querying DOM elements a lot easier, along with other shortcuts. However, to use jQuery, you will have to import the jQuery library. If you don’t have it already imported to your website, I would recommend to go with JavaScript to avoid importing a huge library just for a little script snippet.

Scroll event with Javascript

				
					// Get navigation element by class name
var header = document.getElementsByClassName("headerClass")[0];
// Use prevScroll value to determine scroll direction
var prevScroll = window.pageYOffset;

// Capture scroll events
window.onscroll = function() {
	var scroll = window.pageYOffset;
	// Add class after scrolling 300px from top
  	if ((scroll > 300 ) && (scroll > prevScroll)) {
		header.classList.add("hideNav");
  	} else {
  	    // Remove class when scrolling up
		header.classList.remove("hideNav");
	}
	prevScroll = scroll;
}

Scroll event with jQuery

				
					// Get navigation by class name
var nav = $(".yourNavClass");

//  use prevScroll value to determine scroll direction
var prevScroll = $(window).scrollTop();

// Capture scroll events
$(window).scroll(function() {
    // Get current scroll position
    var scroll = $(window).scrollTop();

    // Add class after scrolling down 300px from top
    if ((scroll >= 300) && (scroll > prevScroll)) {
        nav.addClass("hideNav");
    } else {
        // Remove class when scrolling up
        nav.removeClass("hideNav");
    }
    prevScroll = scroll;
});

CSS animation for hiding the navigation

Add a negative positioning property to your new class depending on your navigation implementation (eg. “margin-top” or “top”) to hide the navigation. Then add a transition animation to make it slide between the two states. Don’t forget to add the positioning property to the original state of the element, otherwise the transition won’t work.

				
					nav {
    // depends on nav implementation 
    // eg "top: 0" will work if positioned absolute
    margin-top: 0;
    transition: margin-top 1s ease-in;
}

nav.hideNav {
    // adjust depending on nav height
    margin-top: -80px;
    transition: margin-top 1s ease-in;
}