Skip to content

Instantly share code, notes, and snippets.

@Catevika

Catevika/Navbar: Hide on Scroll and Show at Scroll position

Last active March 16, 2023 11:17
Show Gist options
  • Save Catevika/6237236bccee726c3d333147272d2154 to your computer and use it in GitHub Desktop.
Save Catevika/6237236bccee726c3d333147272d2154 to your computer and use it in GitHub Desktop.
Download ZIP
Javascript snippet to hide navigation bar on scroll and show it again at scroll position
Raw
Navbar: Hide on Scroll and Show at Scroll position
/*=====================================================
= Navbar: Hide on Scroll and Show at Scroll position =
=====================================================*/
const navbar = document.querySelector('nav');
let lastScrollTop;
window.addEventListener('scroll', function () {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
if (scrollTop > lastScrollTop) {
navbar.style.top = '-75px'; /* height of the navbar */
}
else {
navbar.style.top = '0';
}
lastScrollTop = scrollTop;
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment