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!
Creo que el destello blanco al que te refieres es el desplazamiento de retroceso del navegador.
La solución más simple es establecer el background-color en su elemento html en el mismo color que su fondo.
html { background-color: #000; }Esto deja el Spring-Scroll en efecto, pero hará que el área del Spring sea negra.
También puede deshabilitar el desplazamiento de primavera por completo con overscroll-behavior-y: none; . La última vez que lo comprobé, esto no funciona para iOS Safari, que necesita una solución más pirateada.
html, body{ overscroll-behavior-y: none; }