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>
  );
};