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

Post by Dibakar Dutta » Tue Jan 08, 2019 1:35 pm

Thank you.it works. but the background color is not there in my case. What should I do in this case?

Newbie

Posts

Joined
Thu Oct 05, 2017 9:38 pm

Post by fadichmn » Sun Mar 03, 2019 10:32 pm

Dibakar Dutta wrote:
Tue Jan 08, 2019 1:35 pm
Thank you.it works. but the background color is not there in my case. What should I do in this case?
You can use css style for .navbar , .cloned, and .original.
For backgrounds use #menu

Newbie

Posts

Joined
Thu Jun 01, 2017 7:47 am

Post by stefg » Sun Mar 22, 2020 1:28 pm

Thank you!

New member

Posts

Joined
Fri Oct 18, 2019 7:25 pm

Post by Raslinza » Wed Jul 29, 2020 6:37 pm

Thank you this worked for me. too.

Much appreciated.

Newbie

Posts

Joined
Mon Feb 10, 2020 6:47 pm
Who is online

Users browsing this forum: No registered users and 71 guests