Skip to content

Instantly share code, notes, and snippets.

@jreviews
Created November 20, 2019 18:07
Show Gist options
  • Save jreviews/acfd0635ff99adb152bdd1ac63971949 to your computer and use it in GitHub Desktop.
Save jreviews/acfd0635ff99adb152bdd1ac63971949 to your computer and use it in GitHub Desktop.
iReview sticky menu - centered
.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;
}
.moduleid-269 .menu-horizontal {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.moduleid-269 .menu-horizontal > li {
flex-shrink: 0;
}
/*
* 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;
function togglestickyMenu() {
if (window.scrollY >= stickyMenuBottom) {
stickyMenu.classList.add('floating-menu');
} else {
stickyMenu.classList.remove('floating-menu');
}
}
window.addEventListener('scroll', togglestickyMenu);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment