Utilicé Hooks de react.js con useState y useEffect, cuando me desplazo hacia abajo y la pantalla baja, el encabezado se oculta después de 250 píxeles. Ahora quiero saber cómo mostrar el encabezado usando los ganchos de reacción cuando me desplazo hacia arriba.
const Navbar = () => { const [show, setShow] = useState(false) const controlNavbar = () => { if (window.scrollY > 250 ) { setShow(true) }else{ setShow(false) } } useEffect(() => { window.addEventListener('scroll', controlNavbar) return () => { window.removeEventListener('scroll', controlNavbar) } }, [])y encabezado:
<header className={`active ${show && 'hidden'}`}></header>CSS:
.active{ height: 4rem; width: 100%; position: fixed; top: 0px; transition: 0.3s linear; display: flex; justify-content:stretch; align-items: center; background-color: #FFFFFF; border-bottom: 1px solid rgba(0, 0, 0, .1); z-index: 40; box-shadow: 0 2px 5px -1px rgba(0, 0, 0, .08); /* padding: 0 7%; */ } .hidden{ height: 4rem; width: 100%; z-index: 40; border-bottom: 1px solid rgba(0, 0, 0, .1); box-shadow: 0 2px 5px -1px rgba(0, 0, 0, .08); position: fixed; top: -80px; transition: 0.3s linear; }En lugar de usar un valor estático (250), debe realizar una verificación dinámica con el desplazamiento anterior. Esta es mi solución completa (usando nextJS):
import React, { useState, useEffect } from 'react'; const Navbar = () => { const [show, setShow] = useState(true); const [lastScrollY, setLastScrollY] = useState(0); const controlNavbar = () => { if (typeof window !== 'undefined') { if (window.scrollY > lastScrollY) { // if scroll down hide the navbar setShow(false); } else { // if scroll up show the navbar setShow(true); } // remember current page location to use in the next move setLastScrollY(window.scrollY); } }; useEffect(() => { if (typeof window !== 'undefined') { window.addEventListener('scroll', controlNavbar); // cleanup function return () => { window.removeEventListener('scroll', controlNavbar); }; } }, [lastScrollY]); return ( <nav className={`active ${show && 'hidden'}`}> .... </nav> ); }; export default Navbar;A partir de un par de búsquedas aquí, me topé con una función de desplazamiento en raw js, pero puede implementarla en su caso y modificarla como lo desee, porque actualmente su función solo usará el falso si scrollY < 250...
En su función controlNav, cree una variable que rastreará la ubicación/punto de su desplazamiento anterior y luego lo comparará con el valor actual del desplazamiento... se verá así:
const controlNavbar = () => { if (window.scrollY >= this.lastScroll ) { setShow(true) }else{ setShow(false) } this.lastScroll = window.scrollY; }NB Esto solo funcionará para desplazarse hacia arriba y hacia abajo sin un valor mínimo.