First of all here's a link to the website so you know what I am talking about: https://lefkosp.netlify.app/ Disclaimer: please visit the website from a PC because it is not yet responsive. I also have the source code on github: https://github.com/lefkosp/my-portfolio
I want the nav bar to move out of view the moment you scroll down, then come back into view if you scroll back up and just move out again if you continue scrolling down.
I also want to add a box-shadow property and a backdrop-filter blur when the nav bar is into view but not at the beginning of the website. I managed to make this but I have a problem with a weird white flash that occurs right before the navbar starts moving, either into view or out of the view.
This is how I calculate which class to add and which to remove based on scroll
useEffect(() => {
document.addEventListener("scroll", function (e) {
if (window.oldScroll > window.scrollY) {
document.querySelector(".nav").classList.remove("move-nav");
document.querySelector(".nav").classList.add("secondary-nav");
}
if (!(window.oldScroll > window.scrollY)) {
document.querySelector(".nav").classList.add("move-nav");
document.querySelector(".nav").classList.remove("secondary-nav");
}
if (!window.scrollY) {
document.querySelector(".nav").classList.remove("move-nav");
document.querySelector(".nav").classList.remove("secondary-nav");
}
window.oldScroll = window.scrollY;
});
}, []);
and these are the classes I use
.nav {
display: flex;
align-items: center;
position: fixed;
width: 100%;
padding: 1rem 3rem;
z-index: 100;
transition: all 0.3s ease;
}
.move-nav {
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.938);
transform: translateY(-72px);
backdrop-filter: blur(20px);
}
.secondary-nav {
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.397);
backdrop-filter: blur(20px);
}
Appreciate any help I can get. Even tips for the website other than this problem since I am kind of a newbie. Thank you!
I think the white flash you're referring to is the browser's springback scroll.
The simplest solution is to set the background-color on your html element to the same colour as your background.
html {
background-color: #000;
}
This leaves the spring-scroll in effect, but will make the spring area black.
You can also disable spring scrolling altogether with overscroll-behavior-y: none;. Last I checked, this doesn't work for iOS Safari, which needs a hackier solution.
html, body{
overscroll-behavior-y: none;
}