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