CSS sticky

Position: sticky combina relative y fixed. El elemento sigue el flujo normal hasta alcanzar un límite y luego queda fijo dentro del contenedor.

Header sticky básico

Uso común: fijar headers al hacer scroll. Se usa position: sticky con top para definir la distancia desde arriba.

Este ejemplo crea un header sticky que se mantiene arriba al desplazar contenido.

Sidebar sticky

También sirve en sidebars, manteniendo navegación o info siempre visible junto al contenido.

Aquí se crea una sidebar sticky que se queda fija al lado del contenido.

Consejos para sticky

Los sticky ayudan en navegación y experiencia, pero hay que aplicarlos bien.

• Define siempre top, left, right o bottom para que funcione.
• Asegura suficiente altura en el contenedor padre.
• Úsalos en menús, sidebars o headers, pero no abuses para no molestar.