Post by fadichmn » Mon Nov 20, 2017 5:23 am

Hello,

I wan't to share a javascript code that makes the menu fixed while scrolling. This is for the default theme.

Put this code anywhere in "catalog/view/theme/default/template/common/menu.twig"

Code: Select all

<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>

Newbie

Posts

Joined
Thu Jun 01, 2017 7:47 am
Who is online

Users browsing this forum: No registered users and 6 guests