jQuery Sticky Header

Hi friends, do you want to make your website’s header sticky? Let’s see how you can make a sticky header with a small piece of jQuery and CSS code.

jQuery code will use to identify at what position of height you want to stick the header, or any div element and add a special class to it. Then will use that class selector to style the CSS code to fix that element.

Let’s see an example.

HTML

<header>
    <div class="nav">
        <ul>
            <li>Home</li>
            <li>Services</li>
            <li>Blog</li>
            <li>About</li>
            <li>Contact</li>
        </ul>
    </div>
</header>

CSS

ul {
    list-style: none;
    display: flex;
    justify-content: flex-start;
    background: #F55909;
    padding: 10px;
}
ul li {
    background: #e3e3e3;
    padding: 5px 15px;
    margin-left: 10px;
}
.fixed {
    position: fixed;
    top:0; 
    left:0;
    width: 100%;
}

You can style it as you want.

jQuery

$(window).scroll(function(){
    var sticky = $('header');
    var scroll = $(window).scrollTop();

    if (scroll >= 10) {
        sticky.addClass('fixed');
    } else {
        sticky.removeClass('fixed');
    }
});

scrollTop(): Used to return the position of the vertical scrollbar for the selected elements.

addClass(): Used to add the class to selected elements

removeClass(): Used to remove the class from selected elements

That’s it!!!

Below you can check the working example of a sticky header with jQuery in codepen.

See the Pen
jQuery Sticky Header by Aman Mehra (@amanmehra)
on CodePen.

Being Tricky 😉