Me preguntaba cómo cambiar el comportamiento de la barra de navegación según la posición de la página web. He visto muchos tutoriales sobre cómo ocultar/mostrar una barra de navegación en el desplazamiento, que vie logró implementar con éxito, sin embargo, eso parece cubrir solo dos estados. Me gustaría que mi barra de navegación tuviera tres: mostrar cuando me desplazo hacia arriba, ocultar cuando me desplazo hacia abajo y cambiar la opacidad si estoy en la parte superior del sitio web. Intenté usar una variedad de useEffects y detectores de eventos, pero soy bastante nuevo en reaccionar y js.
Aquí hay un buen ejemplo del efecto que estoy buscando https://brittanychiang.com/ . Como puede ver, una vez que está en la parte superior de la página web, la opacidad cambia, así como la sombra paralela, todo parece estar 'atascado' en la parte superior en lugar del aspecto flotante cuando se desplaza hacia arriba o hacia abajo. Usando las herramientas de desarrollo, descubrí que la clase de la barra de navegación parece tener tres nombres diferentes según la ubicación de la barra de desplazamiento.
¡Gracias por adelantado!
Debe manejar eventos de 'desplazamiento' utilizando las funciones de ciclo de vida de su componente.
Encuentre este ejemplo para su componente de encabezado. Con algunos ajustes, es posible que puedas usarlo.
Componente de clase:
componentDidMount: function() { window.addEventListener('scroll', this.handleScroll); }, componentWillUnmount: function() { window.removeEventListener('scroll', this.handleScroll); }, handleScroll: function(event) { let scrollTop = event.srcElement.body.scrollTop, itemTranslate = Math.min(0, scrollTop/3 - 60); this.setState({ transform: itemTranslate // and use this on your header }); },componente funcional:
const [headerPosition, setHeaderPosition] = useState(0) const handleScroll = useCallback((event) => { let scrollTop = event.srcElement.body.scrollTop, itemTranslate = Math.min(0, scrollTop/3 - 60); setHeaderPosition({ transform: itemTranslate // and use this on your header }); }, [setHeaderPosition]) useEffect(() => { window.addEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll); }, [handleScroll])use una matriz en blanco en useEffect para ejecutarlo una vez cuando esté montado
luego use un state para establecer como (arriba, abajo, arriba) desde el evento de desplazamiento de la ventana
js
export function headerSystem(){ const [hState,sethState] = useState("top") useEffect(()=>{ var lastVal = 0 window.onscroll = function(){ let y = window.scrollY if(y > lastVal){sethState("down")} if(y < lastVal) {sethState("up")} if(y === 0) {sethState("top")} lastVal = y } },[]) return ( <div className="root"> <div className={"header text-center p-4 bg-blue-200 fixed w-full text-lg font-semibold " + hState}>this is header</div> <div className="pageContent bg-green-500"> <div className="each h-screen"></div> <div className="each h-screen"></div> <div className="each h-screen"></div> <div className="each h-screen"></div> <div className="each h-screen"></div> </div> </div> ) }CSS
.header { background: rgba(0, 0, 0, 0); transition: all 0.3s ease; } .top { top: 0px; } .down { top: -80px; } .up { top: 0px; } .up, .down { background: rgba(0, 255, 242, 0.363); box-shadow: 0px 0px 5px black; padding: 8px; }