Como detectar un elemento sticky cuando se queda fijo

· 1 min de lectura
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

Artículos Relacionados

Cómo utilizar window.confirm()
· 1 min de lectura
Como elegir una clave SSH para un host especifico
· 1 min de lectura
SVG generadores de patrones
· 1 min de lectura
Convertir una cadena en un array en JavaScript
· 2 min de lectura
Video responsive de YouTube y Vimeo con HTML y CSS
· 1 min de lectura
¿Qué es Deno 🦕 reemplazará a NodeJS?
· 3 min de lectura