How to: Create a Sticky Navigation Visible on Scroll Up

by Utsab Karki, Senior WordPress Developer

Insights / Website Development / How to: Create a Sticky Navigation Visible on Scroll Up

Have you ever been a website where, when you scroll down the page, the menu and navigation “stick” to the top of the page and follow you down?

That’s, not surprisingly, called a sticky navigation (or sticky header), and it’s a great way to help users navigate your site, improves interactivity, and enhances the user experience.

With traditional static headers, users have to scroll all the way to the top of the page to access the site navigation – which isn’t a great user experience, especially with very long webpages.

There are a few different ways sticky headers can be built with unique options; let’s go through some of those methods here.

Traditional Sticky Navigation Using CSS

With just a few lines of CSS, you can turn a traditional static header into a sticky header. The CSS position: fixed; property, when applied to an element, tells the browser to keep the element fixed relative to the viewport at a certain position on screen.

In this example, we apply the CSS to the header element.

The position: fixed; property makes the header fixed on the screen. The top: 0; property positions the header at the top of the screen whereas the left: 0; and right: 0; property ensures that the header spans the full width of the screen.

The z-index property may need to be adjusted depending on your website, but it is an important property when making headers sticky as it dictates the stacking order of elements on a page. An element with a higher z-index is always in front of an element with a lower z-index. Giving the sticky header a higher z-index than other elements on the page guarantees that the header does not get overlapped.

header {
     display: block;
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 9999;
}

This CSS works great for most headers, but if you have a relatively large header on your site, then making it sticky may mean that it is taking up too much space on the screen.

If that’s the case, it may make other content on the page difficult to see or use.

Hide and Show the Sticky Header on Scroll

If your header is especially large, you may want to make some adjustments to it when your user starts scrolling.

You can hide some of the elements, reduce the overall header height, or even hide the sticky header until the user scrolls back up a few pixels.

Using JavaScript, Here’s how you can adjust your sticky header to stay hidden as your user scrolls down, but slide back in when they scroll up.

var lastScrollPosition = $(window).scrollTop();
$(window).on('load scroll', function(){
    	var windowScrollTop = $(window).scrollTop(),
    	 currScrollPosition = windowScrollTop;
    	// Determine Scrolling
    	if (windowScrollTop <= 0){
        	// At the top
            body.removeClass('scrolling scrolling-up scrolling-down');
    	} else if (currScrollPosition < lastScrollPosition) {
        	// Scrolling Up
        	$('body').addClass('scrolling scrolling-up').removeClass('scrolling-down');
    	} else {
        	// Scrolling Down
        	$('body').addClass('scrolling scrolling-down').removeClass('scrolling-up');
    	}
       	lastScrollPosition = currScrollPosition; 
    	return false;
});

In the above JavaScript (JS), we store the current scroll position of the user on the screen in the lastScrollPosition variable. Then, we run the function whenever the window loads or the user is scrolling on the screen. The window’s new scroll position is saved in the windowScrollTop and the curentScrollPosition variables.

If the user is scrolling down, we add the scrolling and scrolling-down classes to the body element. If the user is scrolling up, we add the scrolling and scrolling-up classes to the body element. If the user is at the very top of the screen, we remove both classes from the body element.

After each operation, we update the lastScrollPosition variable with the current window scroll position.

To hide the header completely when scrolling down – but have it appear when the user is at the top of the screen or when scrolling up, add the following CSS:

body.scrolling-down header {
     display: none;
}

If you want to reduce the height of the header when the user is scrolling, you have to first set a height. Let’s set our header is 150px tall. To reduce its height to 75px, add this CSS:

body.scrolling header {
     height: 75px;
}

By using this code, you can easily implement a sticky header to enhance user experience and ensure that your website is user-friendly and accessible. If you would like to implement a sticky header on your website or for any other digital marketing needs, reach out to us.