I'm trying to make a navbar visible only when the user passes the header section. I set up a simple function to be triggered by "onScroll". However it's not really working.
Component:
function App() {
const [productArray, setProductArray] = useState([]);
const [navBarClass, setNavBarClass] = useState("hidden");
const navBarScroll = () => {
setNavBarClass("visible");
}; // this should make the navbar visible
return (
<div className="App">
<Header onScroll={navBarScroll} /> // Here's the onScroll
<ProductContainer
productArray={productArray}
setProductArray={setProductArray}
/>
<About />
<Footer />
<NavBar className={navBarClass} /> // This is the nav bar
</div>
);
}
Header Component:
const Header = () => {
return (
<div className="header" id="home">
<div className="header-sub">
<div className="div-1">
<img src={logo} alt="logo" className="logo" />
<div className="menu">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#shop">Shop</a>
<a href="mailto:example@gmail.com">Contact</a>
<ShoppingCartIcon className="btn" />
<p></p>
</div>
</div>
<div className="div-2">
<FadeIn transitionDuration="2500">
<h1>AS UNIQUE AS YOU ARE.</h1>
</FadeIn>
</div>
<div className="div-3"></div>
</div>
</div>
);
};
Issue is onScroll is not being consumed in Header component. We need to add onScroll event on HTML tag in order for it to be invoked.
You can read onScroll prop in Header component and pass it to parent div as below and it should get called:
const Header = ({onScroll}) => {
return (
<div className="header" id="home" onScroll={onScroll}>
<div className="header-sub">
<div className="div-1">
<img src={logo} alt="logo" className="logo" />
<div className="menu">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#shop">Shop</a>
<a href="mailto:example@gmail.com">Contact</a>
<ShoppingCartIcon className="btn" />
<p></p>
</div>
</div>
<div className="div-2">
<FadeIn transitionDuration="2500">
<h1>AS UNIQUE AS YOU ARE.</h1>
</FadeIn>
</div>
<div className="div-3"></div>
</div>
</div>
);
};