La posición sticky combina aspectos de las posiciones relativa y fija. Cuando un elemento tiene posición sticky, se comporta como un elemento posicionado relativamente hasta que alcanza un cierto umbral en la página. En ese momento, cambia a comportarse como un elemento fijo.

position: sticky;

Consideremos la siguiente ilustración. El elemento con el contenido de texto I am sticky tiene la posición sticky.

Cuando un elemento está dentro de un contenedor, y el contenedor permanece dentro del viewport, el elemento se comporta como si estuviera posicionado relativamente. Sin embargo, cuando una parte del contenedor principal sale del viewport, el elemento queda fijo en su lugar mientras alguna parte del contenedor permanezca visible en la pantalla. Una vez que todo el contenedor sale del viewport, se reactiva la posición relativa y el elemento desaparece junto con el contenedor.

Realicemos una práctica y creemos un par de secciones con títulos sticky. Así, el usuario siempre podrá ver el título de la sección que está leyendo en ese momento, y luego este desaparecerá al hacer scroll.

Nota

Es importante mencionar que debemos especificar la propiedad top o bottom, para que el navegador pueda entender dónde esperamos que se adhiera un elemento.