Tengo un elemento pegado en la parte inferior de la ventana gráfica. Estoy tratando de que cambie el texto al llegar a su "destino", es decir, cuando deja de pegarse.

Encontré una solución algo relevante en otro lugar en línea, pero no puedo hacer que funcione... Casi funciona, pero solo entra en vigor una vez que el elemento entra en contacto con la parte superior de la ventana gráfica. Mientras que quiero que se vuelva rosa una vez que deje de pegarse, inmediatamente cuando toque el elemento azul.

He buscado alrededor de una semana y todavía no puedo encontrar una manera de hacer que esto suceda, ni he tenido ningún éxito a través de pura prueba y error...

Espero que algunos de ustedes, magos, sepan cómo puedo lograr esto.

Enlace a codepen: https://codepen.io/darkwing/pen/WNwVXKx

Ignore que el elemento comienza en rosa a continuación si no usa el enlace anterior.

 const el = document.querySelector(".myElement") const observer = new IntersectionObserver( ([e]) => e.target.classList.toggle("is-pinned", e.intersectionRatio < 1), { threshold: [1] } ); observer.observe(el);

 #parent { height: 2000px; } .filler { background-color: green; height: 500px; } .myElement { width: 300px; height: 200px; background-color: red; position: sticky; bottom: 0; } .otherElement { width: 300px; height: 200px; background-color: blue; } /* styles for when the header is in sticky mode */ .myElement.is-pinned { background-color: pink; }

 <div id="parent"> <div class="filler"></div> <div class="myElement"></div> <div class="otherElement"></div> </div>