Como detectar un elemento sticky cuando se queda fijo

Realizando proyectos tuve la necesidad de saber cuando un elemento se queda fijo sticky al realizar scroll.

Podemos saber si un elemento se ha vuelto fijo sticky gracias a Intersection Observer API

Fijar un elemento en la parte superior de su contenedor es tan fácil con CSS

.myElement {
  position: sticky;
  top: 0;
}

Cómo podemos detectar si un elemento esta fijo sticky cuando hacemos scroll en la pagina. Lo ideal sería que hubiera una directiva CSS que pudiéramos utilizar, pero en su lugar lo mejor que podemos hacer es aplicar una clase CSS cuando el elemento esta fijo. Esto se puede hacer con un truco de CSS y algo de magia de JavaScript.

.myElement {
  position: sticky;
  top: -1px;
}

.is-pinned {
  color: white;
  background: blue;
}

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

observer.observe(el);

Tan pronto cuando se quede fijo se añade la clase is-pinned de lo contrario se removerá la clase añadida.

Credit: David Walsh