0
323
VisualizaçõesCó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 Respostas
Responde à pergunta0
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.