Skip to content

Instantly share code, notes, and snippets.

@jreviews
Last active November 19, 2019 19:19
Show Gist options
  • Save jreviews/09a12f4365a47748356001b979945a1a to your computer and use it in GitHub Desktop.
Save jreviews/09a12f4365a47748356001b979945a1a to your computer and use it in GitHub Desktop.
iReview sticky menu
.floating-menu {
position: fixed;
top: 40px; /*adjustment for existing top-bar module, so the menu stacks below it*/
left: 0;
right: 0;
width: 100%;
z-index: 1;
}
/*
* Add this in the custom javascript setting in the template/theme between script tags!
*/
const stickyMenuModuleId = 269;
const stickyMenu = document.querySelector('.moduleid-'+stickyMenuModuleId+' .mod-content');
const stickyMenuInner = document.querySelector('.moduleid-'+stickyMenuModuleId+' .mod-content .menu-horizontal');
const stickyMenuBottom = stickyMenu.offsetTop;
let stickyMenuLeft = stickyMenu.offsetLeft;
function togglestickyMenu() {
if (window.scrollY >= stickyMenuBottom) {
stickyMenu.classList.add('floating-menu');
stickyMenuInner.style.paddingLeft = stickyMenuLeft+'px';
} else {
stickyMenu.classList.remove('floating-menu');
stickyMenuInner.style.paddingLeft = 0;
}
}
window.addEventListener('scroll', togglestickyMenu);
window.addEventListener('resize', function(){
stickyMenuLeft = stickyMenu.offsetLeft;
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment