Make Sticky Header in Magento 2 – Solving JavaScript and CSS Issues

cssjavascriptmagento2magento2.2.3

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.

Best Answer

You can use default M2 Sticky

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

And CSS

#header {
  position: relative;
}

Related Solutions

Magento 2 – How to Remove Minicart from Sticky Header

If you are Using Custom Theme Check your header block, there should be a block named as mini_cart(block-name could be change according to your theme) , I wonder your sticky header is rending to the header block.

If you want to remove minicart from complete header you could use Magento XML to remover blocks from layouts.

<referenceBlock name="block_name" remove="true"/>

Example:

<?xml version="1.0"?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <body>
        <referenceBlock name="block_name" remove="true"/>
    </body>
</page>

Even Magento2 Provides us the way to disable Minicart popup through admin panel, To disable, go to Stores > Configuration > Sales > Checkout > Shopping Cart Sidebar and change "Display Shopping Cart Sidebar" to No.

Or Else You want to Disable Minicart only on Sticky Header You can do so with Css:

Checkout the class Sticky header is adding to parent class after a slight scroll, It should be .active or .opened or anything like that.

just add the css in your custom style sheet

.parentClass.active{
     display:none;
}

Hope this will help.

Magento – Magento 2 how to make sticky navigation top menu for frontend

in header.phtml in your theme add this:

<script type="text/javascript">
require([ "jquery" ], function($){
    $(document).scroll(function () {
        var $window = $(window);
        var windowsize = $window.width();
        var height = $(document).scrollTop();
            if(height  > 150 && windowsize >= 768) {
                $('your header class').addClass('fixed-menu');
            }else{
                $('your header class').removeClass('fixed-menu');
            }
    });
});
</script>
<style type="text/css">
    .fixed-menu{ 
        animation-duration: .45s;
        animation-fill-mode: both;
        animation-name: fadeInDown;
        position: fixed;
        z-index: 500;
        width: 100% ;
        top:0;
        border-bottom: 1px solid #ccccb3;
    }
</style>

hope this will helps you.

Related Topic