Hace cuatro años, Eric Bidelman creó una entrada de blog asombrosa sobre el hecho de que position: sticky llegó a WebKit, que en ese momento era el motor que utilizaba 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 forma tal que se integre bien al sistema de desplazamiento y composición existente".
Siempre quisimos volver a tenerla en Chrome como indicaba el error: "Una vez que organizamos nuestro desplazamiento y la composición de la casa, deberíamos volver a position:
sticky e implementar la función de forma que se integre bien en el resto del motor". Se ha trabajado en el metaerror que hace un 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 estar disponible en Chrome.
¿Qué es position:fija?
Me llevó un poco llegar hasta aquí. ¿Por qué me entusiasma?
position:sticky es un atributo de posicionamiento de CSS que te permite corregir un elemento en el viewport (es decir, fijarlo en 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 en el viewport, el elemento actuará como si fuera position: relative. Es una adición muy agradable y sencilla a la plataforma que quita 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 sticky en el elemento que deseas atascar.
Además, puedes agregar el desplazamiento en el lugar en que debe atascarse.
h3 {
/* Element will be 'fixed' when it ... */
position: sticky;
/* ... is 10px from the top of the viewport */
top: 10px;
}
En el ejemplo anterior, se corregirá el elemento <h3> a 10 px desde la parte superior del viewport. Para corregirlo directamente en la parte superior del viewport, debes configurar el atributo top como top: 0px.
La compatibilidad con esta función es bastante fuerte. Está disponible en Chrome (yay),
Firefox y Safari. Aquí encontrarás más detalles sobre position:sticky: