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.
✨ Pregunta a Lara — tu compañera de estudio con IA
Desbloquea soporte de aprendizaje personalizado. Lara puede explicar lecciones, resumir temas y responder tus preguntas — disponible desde el plan Go y superiores.
Lara te ayuda a aprender más rápido — exclusivo para los miembros ReadyTools Go, Plus y Max.
