Position: sticky 2.9.12

Position: sticky

·Por Kseso ⧉ 2.9.12 ⚑ novedad ⚑ position: sticky ✎ 0

Position: sticky fue propuesta de Edward O’Connor para posicionar elementos.
Tiene un comportamiento similar a fixed & absolute pero actuando de forma relativa y teniendo como referente no al viewport si no la caja contenedora padre.
Se comporta como un elemento posicionado como relative hasta alcanzar cierta posición indicada con top respecto al viewport, entonces permanece fijo en esta posición hasta desaparecer de la vista (ventana) junto a su padre.

Sintaxis de Position: sticky

Como cualquier declaración Css, en este caso, Position: sticky necesita acompañarse (de forma opcional) de un valor para que el elemento tenga cierto recorrido y al alcanzar el tope actúe como freno y se mantenga visible:


.elemento_sticky {
 position: sticky;
 top: 1.5em;
}

¿Complicado de entender el concepto?. Mejor ver el comportamiento con un ejemplo. Ve el soporte

Haz scroll vertical en el ejemplo de abajo y fíjate qué ocurre con los título y algunas imágenes:

See the Pen CSS position: sticky by Kseso (@Kseso) on CodePen.

Soporte Position: sticky

Actualizado 2017

Entre lo navegadores de escritorio, con la vuelta a Chrome 56, casi todos, excepto los IE´s y Edge con su eterna leyenda de under consideration.

Puedes verificar su estado en Caniuse position:sticky

Más info

Un ejemplo de uso práctico de la declaración position: sticky es la realización más sencilla y simple de una tabla con su thead o encabezado fijo: Sticky Header en tablas puro CSS

Kseso

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.