Skip to content

Instantly share code, notes, and snippets.

@gucheen
Created August 19, 2014 02:31
Show Gist options
  • Save gucheen/f50bcf8c8727ea1be918 to your computer and use it in GitHub Desktop.
Save gucheen/f50bcf8c8727ea1be918 to your computer and use it in GitHub Desktop.
Creating a sticky menu
var menu = document.querySelector('.menu');
var menuPosition = menu.getBoundingClientRect();
var placeholder = document.createElement('div');
placeholder.style.width = menuPosition.width + 'px';
placeholder.style.height = menuPosition.height + 'px';
var isAdded = false;
window.addEventListener('scroll', function() {
if (window.pageYOffset >= menuPosition.top && !isAdded) {
menu.classList.add('sticky');
menu.parentNode.insertBefore(placeholder, menu);
isAdded = true;
} else if (window.pageYOffset < menuPosition.top && isAdded) {
menu.classList.remove('sticky');
menu.parentNode.removeChild(placeholder);
isAdded = false;
}
});
/* A sticky class
.sticky {
top: 0;
position: fixed;
}
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment