Free** Sticky fixed menu on scroll
Posted: 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"
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>