Sticky Position (Bar) with CSS or jQuery

The idea of ‘sticky position’ is to make elements on a website stick and remain visible. These elements will initially be in their designated position, and when scrolling down the webpage, they will follow the scroll.

Facebook applies this technique to its sidebar; when you scroll down the page, the sidebar follows the scroll, remaining visible.

Historically, this effect was achieved using JavaScript or jQuery, as shown below.

The jQuery Way

In this example, we’ll create a simple webpage consisting of a header, navigation, and content area.

<div class="wrapper">
    <div class="header">
        Header
    </div>
    <div class="nav">
        Navigation
    </div>
    <div class="content">
        <p>Candy canes tart pie biscuit. Cupcake liquorice cake dessert tootsie roll
        applicake pastry. ...</p>
    </div>
</div>

We will apply the sticky position to the navigation element.

First, let’s define the necessary styles in the stylesheet:

.sticky {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 100;
    border-top: 0;
}

Then, we’ll conditionally apply this class to the navigation using jQuery.

$(document).ready(function() {
    var stickyNavTop = $('.nav').offset().top;

    var stickyNav = function(){
        var scrollTop = $(window).scrollTop();

        if (scrollTop > stickyNavTop) {
            $('.nav').addClass('sticky');
        } else {
            $('.nav').removeClass('sticky');
        }
    };

    stickyNav();

    $(window).scroll(function() {
        stickyNav();
    });
});

You can view the demo via the link below.

This method might seem a bit complex for those unfamiliar with jQuery. Alternatively, you can achieve the same effect more easily using a jQuery plugin like ScrollToFixed. Otherwise, let’s explore the CSS approach.

The CSS Way

Recently, WebKit introduced a new position value called sticky, which achieves the same result as the jQuery code. However, as sticky is still considered an experimental feature, you need to enable it first.

If you’re using Chrome version 23 or later, type chrome://flags into the address bar. Otherwise, you’ll need to update Chrome first.

Then, find the Enable experimental WebKit features option on the list and set it to Enable.

In the stylesheet, simply set the navigation’s position to sticky. Since it’s currently only available in WebKit, you’ll need the vendor prefix:

.nav {
    position: -webkit-sticky;
    top: 0;
    z-index: 1;
}

The navigation should now behave the same way as the jQuery version. View the demo below in a compatible browser (like older Chrome versions or Safari) to see it in action.

However, as mentioned, this feature was experimental and required vendor prefixes. Modern browsers now widely support position: sticky without prefixes.