Mirando la API de IntersectionObserver , parece que puede usar rootMargin para especificar compensaciones para que el contenedor obligue a la API a activarse cuando un elemento está cerca o a cierta cantidad de píxeles dentro de un contenedor de destino. Pero con el siguiente ejemplo, parece que no dispara. Configuré el 'rootMargin' para que tenga un margen superior de 11 px, por lo que el elemento adhesivo (que se pega a 10 px desde la parte superior) debe superponerse parcialmente, lo que hace que el observador informe un cambio en la visibilidad.
Esta lógica funciona bien si tengo top: -1px en lugar de top: 10px , pero según toda la documentación que puedo encontrar, esto también debería funcionar. Probé algunas variaciones de márgenes, valores negativos, etc. para intentar que esto funcione, sin éxito, pero adivinar al azar no debería ser la solución.
¿Alguna idea de lo que estoy haciendo mal?
HTML:
<div class="container"> <div class="before-content">This content should scroll off the screen</div> <div class="sticky">Sticky content</div> <div class="after-content">This is some extra content after</div> </div>CSS:
* { color: #b58900; } .container { background-color: #002b36; } .before-content { height: 50px; } .sticky { height: 30px; background-color: #073642; position: sticky; top: 10px; } .after-content { height: 200px; }JS:
const sticky = document.getElementsByClassName("sticky")[0]; const observer = new IntersectionObserver( ([e]) => { console.log(e.intersectionRatio) const stuck = e.intersectionRatio < 1.0; sticky.innerHTML = "Sticky content (" + String(stuck) + ")" }, { threshold: [1], // This doesn't work; changing the css ".sticky { top : -1 }" does cause the intersect logic // to fire and "stuck == true", but according to mdn docs it sounds like setting rootMargin // this way should have the same effect. rootMargin: '11px 0px 0px 0px', } ) observer.observe(sticky)