OpenCart 3. very light "sticky menu" script

A javascript code that makes the menu fixed while scrolling. This is for the default theme.

Put this code at the end of the file in "catalog/view/theme/default/template/common/menu.twig"

<script>
$('.navbar').addClass('original').clone().insertAfter('.navbar').addClass('cloned').css('position', 'fixed').css('top', '0').css('margin-top', '0').css('z-index', '500').removeClass('original').hide();

scrollIntervalID = setInterval(stickIt, 10);

function stickIt() {
  var orgElementPos = $('.original').offset();
  orgElementTop = orgElementPos.top;

  if ($(window).scrollTop() >= (orgElementTop)) {
    orgElement = $('.original');
    coordsOrgElement = orgElement.offset();
    leftOrgElement = coordsOrgElement.left;
    widthOrgElement = orgElement.css('width');
    $('.cloned').css('left', leftOrgElement + 'px').css('top', 0).css('width', widthOrgElement).show();
    $('.original').css('visibility', 'hidden');
  } else {
    // not scrolled past the menu; only show the original menu.
    $('.cloned').hide();
    $('.original').css('visibility', 'visible');
  }
}
</script>

Another sticky script,  jquery.sticky.js - you can find it online, download to your Javascript folder on the server and add the following text to header. This allow not to stick menu at mobile devices.

<script src="catalog/view/javascript/jquery/jquery.sticky.js" type="text/javascript"></script>

<script>
 $(window).resize(function() {
  if( $(window).width() > 768 ) {
    $(document).ready(function(){
      $("#menu").sticky({topSpacing:0}).sticky({zIndex:500});
      $("#supermenu").sticky({topSpacing:0}).sticky({zIndex:500});
    });
  }
});
 $(window).resize(function() {
  if ($(window).width() < 769) { 
    $(document).ready(function(){
      $("#menu").unstick();
      $("#supermenu").unstick();
    });
  }
});
  if( $(window).width() > 768 ) {
    $(document).ready(function(){
      $("#menu").sticky({topSpacing:0}).sticky({zIndex:500});
      $("#supermenu").sticky({topSpacing:0}).sticky({zIndex:500});
    });
  }
</script>