Actualmente estoy trabajando en un proyecto de sitio web de cartera usando HTML, CSS, PHP y JavaScript. Casi lo he completado. Hay un problema al que me enfrento y me cuesta mucho solucionarlo. Así que hice una barra de navegación pegajosa usando IntersectionObserver . Y he hecho que el sitio web responda. Por lo tanto, la barra de navegación fija funciona bien con todas las pantallas, excepto con las pantallas móviles más pequeñas .
Básicamente, adjunté IntersectionObserver a la sección de home y funciona bien para pantallas grandes al lanzar una entry Intersecting y mostrar la navegación fija, pero para pantallas más pequeñas, tan pronto como llego a about-section , sigue arrojando unlimited entries ("las revisé en la consola'). Y no soy capaz de encontrar por qué está sucediendo. Una ayuda será muy apreciada.
Aquí está el enlace al proyecto , simplemente vaya a la pantalla más pequeña donde puede ver el ícono del menú de hamburguesas y luego intente ir al comienzo de about-section , la pantalla seguirá temblando hasta que mueva el desplazamiento desde esa posición.
Creo que el problema original era la invocación continua del observador de intersección. Esto pareció ocurrir exactamente cuando la parte inferior del objetivo tocó/estaba a solo 1 píxel por encima de la parte superior de la raíz. Las 2 áreas no se superponían sino que se tocaban. La parte inferior del objetivo estaba en el píxel 100 y la parte superior de la raíz estaba en el píxel 101, por ejemplo. Ahora, el observador de intersección tiene 2 declaraciones if que hacen que el elemento del cuerpo tenga una clase 'nav-scrolled' agregada/eliminada a/de él. Esta adición de la clase "nav-scrolled" hace que esta regla css coincida con "nav-scrolled .nav-bar". Esa regla hace que la posición fija de la barra de navegación. En realidad, es bastante difícil desplazarse, por lo que el objetivo y la raíz se tocan en los bordes. Creo que una solución diferente sería hacer que el umbral en la opción del observador de intersección sea 0.01. Originalmente, el umbral era 0 - cero, lo que significa que se llama a io cuando al menos 1 píxel se cruza con la raíz. Creo que esta intersección puede incluir ser adyacente. La clase añadida parece cambiar ligeramente la posición de algunos elementos.
Así que una solución podría ser cambiar el umbral. Elegí ajustar el código de devolución de llamada que parece más robusto. Este código verifica el borde inferior del objetivo y la parte superior de la raíz.
if(entry.boundingClientRect.bottom < entry.rootBounds.top){ body.classList.add("nav-scrolled"); }else{ body.classList.remove("nav-scrolled"); } replace if (!entry.isIntersecting) { body.classList.add("nav-scrolled"); } if (entry.isIntersecting) { body.classList.remove("nav-scrolled"); }