Tengo una barra de navegación pegajosa en la parte superior de mi página que tiene un logotipo.
Cuando la página se desplaza, el logotipo cambia para ser un poco más pequeño. Esto provoca un cambio en la posición de desplazamiento Y de la página. Cuando llega a un punto determinado donde se encuentra el umbral de desplazamiento, se atasca entre dos posiciones a medida que cambia la altura del documento, lo que obliga a que ambos puntos de interrupción se activen continuamente. (el logotipo parpadea entre dos tamaños)
Un ejemplo de esto sería que te desplazas para decir la posición 100, luego el tamaño de la barra de navegación cambia a 59 debido al desplazamiento, luego vuelve a subir a 100 y se repite.
Las clases de CSS son viento de cola.
JavaScript haciendo la operación está debajo, bastante sencillo.
¿Cuáles son algunas opciones para abordar esto?
window.addEventListener('scroll', () => scrollFunction()); const navLogo = document.querySelector('.navlogo'); function scrollFunction() { if ($(window).scrollTop() > 80) { navLogo.classList.remove('w-56'); navLogo.classList.add('w-36'); } else { navLogo.classList.add('w-56'); navLogo.classList.remove('w-36'); } }Cualquier ayuda sería muy apreciada.
Cuando dice que su barra de navegación es "pegajosa", ¿quiere decir position: sticky; ?
Envolver su barra de navegación con otro elemento que tenga una altura fija (el tamaño máximo causado por el logotipo grande) y convertirlo en su elemento adhesivo también debería hacer lo mismo. Ahora su barra de navegación real podrá cambiar el tamaño, sin cambiar también la altura del documento.