Kdjykuj

I'm following the answer in this topic to keep header sticky. So far I've created vendor/theme/web/js/sticky.js with the following content:

require([ "jquery" ], function($) {

    $(window).scroll(function() {

        if ($(window).scrollTop() > $('#header').offset().top && !($('#header').hasClass('sticky'))) {

            $('#header-2').addClass('sticky');

        } else if ($(window).scrollTop() == 0) {

            $('#header').removeClass('sticky');

        }

    });

});

and called this file inside vendor/theme/Magento_Theme/layout/default_head_blocks.xml

<link src="js/sticky.js"/>

Second part of this answer says:

"add some css to this sticky class like this:"

#header.sticky {

    background: #fff none repeat scroll 0 0;

    border-bottom: 4px solid #325052;

    margin: 0 auto;

    max-width: 100%;

    position: fixed;

    top: 0;

    width: 100%;

    z-index: 99;

}

How can I implement this part? I've tried creating a css/sticky.css file with the code above and link it on default_head_blocks.xml ( <css src="css/sticky.css"/> ), but it's not working.

You can use default M2 Sticky

define([

    'jquery', 

    'mage/mage', 

    'domReady!'

], function ($) {

    $('#header').mage('sticky', {

        container: '#maincontent',

        spacingTop: 0

    });

});

And CSS

#header {

  position: relative;

}

So I forgot to replace some #header placeholders, correct code below.

Update: I've added padding ( to prevent pixel skipping ) and mobile support ( to pad correct element on mobile interface )

vendor/theme/web/js/sticky.js :

require([ "jquery" ], function($) {

    if( $(window).width() >= 768 ) {

        $(window).scroll(function() {

            if ($(window).scrollTop() > $('.page-header').offset().top && !($('.page-header').hasClass('sticky')) && !($('.sections.nav-sections').hasClass('padding'))) {

                $('.page-header').addClass('sticky');

                $('.sections.nav-sections').addClass('padding');

            } else if ($(window).scrollTop() == 0) {

                $('.page-header').removeClass('sticky');

                $('.sections.nav-sections').removeClass('padding');

            }

        });

    }

    else

    {

        $(window).scroll(function() {

            if ($(window).scrollTop() > $('.page-header').offset().top && !($('.page-header').hasClass('sticky')) && !($('.page-main').hasClass('paddingm'))) {

                $('.page-header').addClass('sticky');

                $('.page-main').addClass('paddingm');

            } else if ($(window).scrollTop() == 0) {

                $('.page-header').removeClass('sticky');

                $('.page-main').removeClass('paddingm');

            }

        });

    }   

});

vendor/theme/web/css/sticky.css :

.sticky {

    background: #fff none repeat scroll 0 0;

    border-bottom: 2px solid #131313;

    margin: 0 auto;

    max-width: 100%;

    max-height: 109px;

    position: fixed;

    top: 0;

    width: 100%;

    z-index: 99;

}



.padding {

    padding-top: 126px;

}



.paddingm {

    padding-top: 107px;

}

( max-height and padding-top values depend on header's height )