Fixed header on scroll

Share on facebook
Share on google
Share on twitter
Share on linkedin
Copy the css code in your theme css file and copy the js code in your theme’s js file. Do not forget to replace the “#header_top” with your target id or class name.

Css:

.sticky{
  width: 100%;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
	right: 0 !important;
		max-width:1440px; margin: 0 auto;  z-index: 99999;
	-webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
	
}

JS:

jQuery(document).ready(function() {
  var NavTop = jQuery('#header_top').offset().top;
  var Nav = function() {
    var scrollTop = jQuery(window).scrollTop();
    if (scrollTop > NavTop) { 
      jQuery('#header_top').addClass('sticky');
    } else {
     jQuery('#header_top').removeClass('sticky'); 
    }
  };

Nav();

  jQuery(window).scroll(function() {
    Nav();
  });
});

Close Menu