0
317
VistasCómo agregar clase para bloquear debajo de la posición: pegajoso
Tengo un bloque con posición: adhesivo y un bloque debajo. ¿Hay alguna forma de rastrear el momento en que el bloque adhesivo se adhiere a la parte superior y agregar una clase al bloque inferior?
Creo que debería usar $(window).scroll() pero no sé cómo.
1 Respuestas
Responde la pregunta0
No hay una forma "oficial" de saber que un elemento está atascado con un posicionamiento fijo que yo sepa en este momento. Pero podrías usar un IntersectionObserver .
Funciona al observar los cambios en la posición de un elemento relacionado, por ejemplo, con una ventana gráfica; en el caso de este ejemplo de código, verifica al menos una diferencia de 1 px (umbral: 1).
const el = document.querySelector(".stickyElement") const observer = new IntersectionObserver( ([e]) => document.querySelector(".elementThatShouldUpdate").classList.toggle("desired-class", e.intersectionRatio < 1), { threshold: [1] } ); observer.observe(el);También debe actualizar su CSS para que el elemento adhesivo tenga en cuenta la diferencia de 1px:
top: -1px;Y también tenga en cuenta este desplazamiento adicional, por lo que debe agregar un borde o un relleno a este elemento:
padding-top: 1px;Déjeme saber si esto ayuda.