How To Make Sticky Header Using Javascript

In this tutorial, we will learn how to create a sticky header using plain Javascript and a bit of CSS. A sticky header is a navigation bar that stays fixed at the top of the page when the user scrolls down. This is a common web design feature that improves navigation and user experience.

HTML Structure

<header>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</header>

Javascript for Sticky Header

window.onscroll = function() {
    stickyHeader();
};

var header = document.querySelector('header');
var sticky = header.offsetTop;

function stickyHeader() {
    if (window.pageYOffset > sticky) {
        header.style.top = '0';
    } else {
        header.style.top = '-100px';
    }
}

First, we select the header element and get its offset top position. Then, we add an event listener to the window object for the scroll event. In the event handler, we check if the current scroll position is greater than the offset top position of the header. If it is, we set the header’s position to fixed, effectively making it sticky. Otherwise, we hide the header by setting its top position to a negative value.

Conclusion

Creating a sticky header using Javascript is a straightforward process. It improves user experience by providing easy access to navigation options as the user scrolls down the page. You can further customize the sticky header by adding animations, transitions, or additional functionality using Javascript and CSS.