Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Scroll direction for sticky header/footer, etc.
window.addEventListener( 'DOMContentLoaded', ()=> {
const body = document.body,
scrollUp = "scroll-up",
scrollDown = "scroll-down",
offset = 0;
let lastScroll = window.pageYOffset;
if ( lastScroll > offset ) {
body.classList.add(scrollUp);
}
window.addEventListener('scroll', ()=> {
const currentScroll = window.pageYOffset;
if ( currentScroll <= offset ) {
body.classList.remove(scrollUp);
return;
}
if ( currentScroll > lastScroll && !body.classList.contains(scrollDown) ) {
body.classList.remove(scrollUp);
body.classList.add(scrollDown);
} else if ( currentScroll < lastScroll && !body.classList.contains(scrollUp) ) {
body.classList.remove(scrollDown);
body.classList.add(scrollUp);
}
lastScroll = currentScroll;
})
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment