En primer lugar, aquí hay un enlace al sitio web para que sepa de lo que estoy hablando: https://lefkosp.netlify.app/ Descargo de responsabilidad: visite el sitio web desde una PC porque aún no responde. También tengo el código fuente en github: https://github.com/lefkosp/my-portfolio

Quiero que la barra de navegación desaparezca de la vista en el momento en que se desplace hacia abajo, luego vuelva a aparecer si se desplaza de nuevo hacia arriba y vuelva a salir si continúa desplazándose hacia abajo.

También quiero agregar una propiedad de sombra de cuadro y un desenfoque de filtro de fondo cuando la barra de navegación está a la vista pero no al comienzo del sitio web. Me las arreglé para hacer esto, pero tengo un problema con un destello blanco extraño que ocurre justo antes de que la barra de navegación comience a moverse, ya sea dentro o fuera de la vista.

Así es como calculo qué clase agregar y cuál eliminar según el desplazamiento

 useEffect(() => { document.addEventListener("scroll", function (e) { if (window.oldScroll > window.scrollY) { document.querySelector(".nav").classList.remove("move-nav"); document.querySelector(".nav").classList.add("secondary-nav"); } if (!(window.oldScroll > window.scrollY)) { document.querySelector(".nav").classList.add("move-nav"); document.querySelector(".nav").classList.remove("secondary-nav"); } if (!window.scrollY) { document.querySelector(".nav").classList.remove("move-nav"); document.querySelector(".nav").classList.remove("secondary-nav"); } window.oldScroll = window.scrollY; }); }, []);

y estas son las clases que uso

 .nav { display: flex; align-items: center; position: fixed; width: 100%; padding: 1rem 3rem; z-index: 100; transition: all 0.3s ease; } .move-nav { box-shadow: 0 15px 30px rgba(0, 0, 0, 0.938); transform: translateY(-72px); backdrop-filter: blur(20px); } .secondary-nav { box-shadow: 0 15px 30px rgba(0, 0, 0, 0.397); backdrop-filter: blur(20px); }

Agradezco cualquier ayuda que pueda obtener. Incluso consejos para el sitio web que no sean este problema, ya que soy un novato. ¡Gracias!