Fijar una cabecera en su sitio con position: sticky

En esta lección harás que un título se quede pegado arriba mientras el contenido se desplaza por debajo.

position: sticky es un híbrido: el elemento se comporta con normalidad hasta que alcanza la posición indicada — aquí top: 0 — y a partir de ahí se queda fijo. A diferencia de fixed, solo permanece pegado mientras su contenedor esté a la vista.

El código de ejemplo pone un título pegajoso dentro de una caja con desplazamiento propio. Desplázate dentro del recuadro y verás que el título se queda arriba mientras los párrafos pasan por detrás.

Hay dos requisitos que se olvidan constantemente: es obligatorio indicar top (o el lado que corresponda), y no funciona si algún ancestro tiene overflow: hidden. Cuando «sticky no hace nada», la causa casi siempre es una de esas dos.

Se usa a diario en cabeceras de tabla que permanecen visibles al recorrer datos largos, en menús de navegación y en índices laterales de documentación. Que el contexto siga a la vista mejora muchísimo la lectura.