Simple Sticky Header ✧ unicorntears.dev ✧

Yes, position:sticky is a thing, but it’s not a well supported thing just yet. Luckily you can achieve the same effect with more control using a bit of JavaScript.

The JavaScript (using jQuery syntax)

  //sticky header
    $(window).scroll(function() {

        var header = $('#header').height();
        //this value can be changed to the height of any other element
        //such as a hero image, depending on your website  design

        if ( $(window).scrollTop() > header ) {
            $header.addClass('sticky');
        } else {
            $header.removeClass('sticky');
        }
    });

The (S)CSS

#header {
    position: relative;

    &.sticky {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
    }
}