I want to design a navigation bar with a unique effect:
The navigation bar starts off transparent, but as you scroll down, it disappears with a subtle animation. However, when you scroll back up, regardless of your position on the page - middle or end, it reappears with a white background. As you continue to scroll up, it becomes sticky until you reach the top, at which point its white background transitions back to transparent. Check it out here.
I tried using this script, but my lack of jQuery knowledge made it challenging for me to understand. I found a relevant snippet, but I'm unsure of how it all fits together.
To tackle this issue, I implemented the following JS code, but unfortunately, it didn't produce the desired outcome:
const header = document.querySelector('.header');
window.addEventListener('scroll', () => {
if (window.scrollY > 10) {
header.classList.add('active');
}
else {
header.classList.remove('active');
}
});
I could really use some guidance on achieving the same effect for my navigation bar.
Thank you in advance!