Estoy tratando de hacer que una barra de navegación sea visible solo cuando el usuario pasa la sección del encabezado. Configuré una función simple para que se active con "onScroll". Sin embargo, en realidad no está funcionando.
Componente:
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> ); }Componente de encabezado:
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> ); };El problema es que onScroll no se consume en el componente de Header . Necesitamos agregar el evento onScroll en la etiqueta HTML para que se invoque.
Puede leer onScroll prop en el componente Header y pasarlo al div principal como se muestra a continuación y debería llamarse:
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> ); };