I've been working on a react component that changes the header based on the scroll event. By attaching an event handler and toggling a display class to show or hide certain elements depending on the scroll position.
However, I've encountered some glitchy behavior whenever the component tries to re-render. You can see an example in the codesandbox link provided below.
import React from "react";
import "./styles.css";
export default function App() {
const [scrollY, setScrollY] = React.useState(0);
React.useEffect(() => {
const handleScroll = () => {
console.log(window.pageYOffset);
setScrollY(window.pageYOffset);
};
window.addEventListener("scroll", handleScroll, { passive: true });
return () => window.removeEventListener("scroll", handleScroll);
}, [setScrollY]);
const scrolled = () => scrollY > 40;
return (
<div className="App">
<div className={`header ${scrolled() ? "d-none" : ""}`}>Header Main</div>
<div>
<div className={`header-secondary ${scrolled() ? "d-none" : ""}`}>
Header Secondary
</div>
<div className={`header-scrolled ${!scrolled() ? "d-none" : ""}`}>
HeaderScrolled
</div>
<div>Scroll Position: {scrollY}</div>
{[...Array(100)].map((e, i) => (
<div>
<div className={scrolled()}>{`SCROLLING`}</div>
</div>
))}
</div>
</div>
);
}
Link to my codesandbox: https://codesandbox.io/s/wizardly-saha-0oklr
I've noticed that the hide/unhide component condition is set at 40px. When scrolling slowly around 40px, the header snaps back and the window.pageYOffset gets reset to 0. I'm puzzled by this behavior and can't seem to figure out why it's happening?
If you scroll past fast enough, it doesn't seem to have an impact, but there's certainly some odd behavior occurring around the display class toggle.
EDIT: Updated Example
What I'm essentially trying to achieve is a smooth transition from the Header Main to the Header Secondary. Unfortunately, I can't modify the styling on Header Main as it's not within my control.