Hace cuatro años, Eric Bidelman creó una entrada de blog bastante interesante sobre el hecho de que position: sticky aterrizó en WebKit, que en ese momento era el motor que impulsaba Chrome (así como muchos otros navegadores, incluido Safari). Un año después, y para consternación de los desarrolladores web, quitamos position:sticky de Chrome porque "la implementación actual no está diseñada de una manera que se integre bien con el sistema de desplazamiento y composición existente".
Siempre quisimos volver a incluirlo en Chrome, como se indicaba en el error: "Una vez que tengamos todo en orden con el desplazamiento y la composición, deberíamos volver a position:
sticky e implementar la función de una manera que se integre bien con el resto del motor". Se trabajó en el error de meta de seguimiento de la implementación desde 2013.
La buena noticia es que, a partir de Chrome 56 (actualmente en versión beta a partir de diciembre de 2016 y estable en enero de 2017), position: sticky volvió a Chrome.
¿Qué es position:sticky?
Llegó después de un tiempo, ¿por qué me entusiasma?
position:sticky es un atributo de posicionamiento de CSS que te permite fijar un elemento en el viewport (es decir, anclarlo a la parte superior de la pantalla), pero solo cuando su elemento superior es visible en el viewport y está dentro del valor del umbral. Cuando no esté fijo al viewport, el elemento se comportará como si fuera position: relative. Es una incorporación muy agradable y simple a la plataforma que elimina la necesidad de usar JavaScript en un controlador de eventos onscroll solo para bloquear un elemento en la parte superior del viewport.
Así se ve en mi blog. Me permite mantener el encabezado de la sección actual en la parte superior de la pantalla mientras lees mis artículos bastante largos y laboriosos :\
Para implementar esta función, especifica que el atributo position debe tener el valor de sticky en el elemento que deseas que permanezca fijo.
Además, también puedes agregar el desplazamiento en el que se debe fijar.
h3 {
/* Element will be 'fixed' when it ... */
position: sticky;
/* ... is 10px from the top of the viewport */
top: 10px;
}
El ejemplo anterior fijará el elemento <h3> a 10 px de la parte superior del viewport. Para fijarlo directamente en la parte superior de la ventana de visualización, debes configurar el atributo top como top: 0px.
La compatibilidad con esta función es bastante sólida. Está disponible en Chrome (¡genial!), Firefox y Safari. A continuación, se incluyen más detalles sobre position:sticky: