My goal is to have the navbar on mobile only appear when the user scrolls to the top of the page.
Currently, it remains fixed at the top regardless if the user is scrolling up or down. I found this code snippet here: Here's a live example:
This is my JavaScript code:
new IntersectionObserver(function(entry, observer){
if (entry[0].intersectionRatio > 0){
document.documentElement.removeAttribute('class');
} else {
document.documentElement.setAttribute('class','stuck');
};
}).observe(document.querySelector('.trigger'));
Update: just to clarify my objective:
The mobile navbar should not be sticky, but instead scroll with the rest of the content. However, when scrolling from the bottom to the top of the page, I want the navbar to appear at the top and remain there until scrolling back down.