Here's a quick script in Vanilla JavaScript that will add/remove a class based on if you're scrolling up or down on a page. In the past, I've used a widget called Headroom.js but I wanted to see if I could replicate the basics from scratch.
Here is the result:
Custom Headroom Demo (view source)
Take a look at the index.html source code.
The main script that runs is this block here:
let scrollPos = 0;
const nav = document.querySelector('.site-nav');
function checkPosition() {
let windowY = window.scrollY;
if (windowY < scrollPos) {
// Scrolling UP
nav.classList.add('is-visible');
nav.classList.remove('is-hidden');
} else {
// Scrolling DOWN
nav.classList.add('is-hidden');
nav.classList.remove('is-visible');
}
scrollPos = windowY;
}
window.addEventListener('scroll', checkPosition);
We add a scroll
event listener to the window
and fire off the checkPosition
function every time the user scrolls on the page.
Looking at function checkPosition(){}
we first get the window.scrollY
position, which is how far in pixels we are from the top of the page. We then compare it to the scrollPos
variable which will get updated to the new window.scrollY
position after each scroll.
If windowY
is less than the previous scrollPos
then we know that we are scrolling up and we can add a class to our nav
element accordingly. In this case, we want our menu to show when scrolling up and hide when scrolling down.
That's basically it, but we'll want to add some sort of throttle so that we don't fire off events like crazy during long scroll sessions. For this we add a debounce
function which will make sure it waits 10ms before firing.
We can replace our window
event listener like this:
function debounce(func, wait = 10, immediate = true) {
let timeout;
return function() {
let context = this, args = arguments;
let later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
let callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
window.addEventListener('scroll', debounce(checkPosition));
All the JavaScript needs to do is add or remove a class to our element, and our CSS will handle the rest.
I know this isn't as flexible as Headroom.js but it's a slimmed down version that might be a good intro into scroll events.
Check out https://codebushi.com/ for more of my web development tips and resources.
Top comments (1)
Truly great stuff.
Could you add that when scrolling down and up the element is hidden. Thank You.