0

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.

5

You can use default M2 Sticky

define([
    'jquery', 
    'mage/mage', 
    'domReady!'
], function ($) {
    $('#header').mage('sticky', {
        container: '#maincontent',
        spacingTop: 0
    });
});

And CSS

#header {
  position: relative;
}
  • This is the better answer – Leland Feb 4 at 20:46
  • Doesn't work for me. Missing steps? – John Feb 6 at 10:13
  • which Magento version you are using? – Frontend Dev Feb 18 at 11:55
1

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 )

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.