Display fixed Menu on Scroll with CSS & jQuery |  Sticky Header on Scroll

Display fixed Menu on Scroll with CSS & jQuery | Sticky Header on Scroll

Fixed Menu on scroll

You need to add jQuery & CSS to your website first.

<script src=”https://code.jquery.com/jquery-3.3.1.js></script>

Then add the following code to toggle “navscrl” class to the menu. With the class you can set the menu fixed on scroll. 
<script>
jQuery(window).on(‘scroll’, function() {
if ($(window).scrollTop()) {
jQuery(‘nav’).addClass(‘navscrl’);
} else {
jQuery(‘nav’).removeClass(‘navscrl’);
}
})
</script>

<style> .navscrl { position:fixed; top:0;left:0;width:100% } </style>

Display fixed Menu onscroll? – Stack Overflow

 

 

Al Mahbub Khan
Written by Al Mahbub Khan Full-Stack Developer & Adobe Certified Magento Developer

Full-stack developer at Scylla Technologies (USA), working remotely from Bangladesh. Adobe Certified Magento Developer.