Hide Sticky Navigation on Scroll Down & Show on Scroll Up

Hide Sticky Navigation on Scroll Down & Show on Scroll Up

W3Schools have an awesome JavaScript solution that hides sticky navigation header on scroll down and shows again on scroll up! It can’t be more simple as that.

We have it here as it prevents minimizing viewport size while scrolling down. It’s a huge relief for those who want a sticky header but don’t want viewport reduction.

Here is the simple JavaScript solution we’re talking about. You can put this script inside another script or add this as an inline script to make the code work.

/* Hide sticky navigation header on scroll down */
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
    var currentScrollPos = window.pageYOffset;
    if (prevScrollpos > currentScrollPos) {
        document.getElementById("navbar").style.top = "0";
    } else {
        document.getElementById("navbar").style.top = "-50px";
    }
    prevScrollpos = currentScrollPos;
}

You might need to change two key elements in this code, change "navbar" with the HTML ID of your header and change "-50px" with the height of your sticky header. If you’re running a WordPress site, most probably the header ID is “site-header”.

After adding the JavaScript code, check your website to see the change of your sticky header. Join in the comments or follow the link below for more details.

Direct Link to W3Schools.com

Leave a Reply

Your email address will not be published. Your comments must follow our guidelines.