¿Qué es un Sticky Header / Footer?

Los elementos sticky combinan características de position: relative y position: fixed. Permiten que un elemento se mantenga dentro del flujo del documento hasta que su contenedor cruza un umbral (top o bottom), momento en el cual se “pega” al borde del viewport.

Esta técnica es útil para menús de navegación, barras de acción, o avisos de cookies que deben estar siempre visibles sin ocultar contenido.

Ejemplo Básico de Sticky Header

.sticky-header {
    position: sticky;   /* Activamos sticky */
    top: 0;             /* Se adhiere al top */
    z-index: 1020;      /* Evita solapamiento */
    background: #0d6efd;
    color: #fff;
    padding: .75rem 1rem;
}

El top: 0 indica que el encabezado se fijará cuando su borde superior llegue al top del viewport. Cambiar a top: 10px crearía un pequeño margen.

Ejemplo Básico de Sticky Footer

.sticky-footer {
    position: sticky;
    bottom: 0;          /* Se adhiere al bottom */
    background: #212529;
    color: #fff;
    padding: .5rem 1rem;
}

El bottom: 0 hace que el pie de página se mantenga visible al final del scroll, pero solo después de que su contenedor haya sido desplazado lo suficiente.

Comparativa: Sticky vs Fixed vs Relative

Mejores Prácticas y Optimización

• Define un z-index adecuado. Los navegadores aplican una capa de apilamiento a los elementos sticky; sin un valor explícito pueden quedar bajo modales o dropdowns.
• Evita overflow: hidden en el contenedor padre. Un contenedor con overflow oculto corta la capacidad sticky de sus hijos.
• Usa will-change: transform (opcional) para indicar al motor de renderizado que el elemento cambiará su posición, reduciendo el “jank” en scroll intensivo.
• Prueba en dispositivos móviles. En iOS Safari, position: sticky necesita que el elemento tenga un background sólido para funcionar correctamente.

Accesibilidad (a11y)

Los encabezados y pies de página sticky pueden interferir con lectores de pantalla si no se marcan adecuadamente. Recomendaciones:

• Utiliza role="banner" para el header y role="contentinfo" para el footer.
• Asegúrate de que el contraste de colores cumpla con WCAG AA (ratio ≥ 4.5:1).
• Si el sticky contiene enlaces de salto ("Ir al contenido"), colócalos al inicio del body para que sean fácilmente accesibles.

Solución de Problemas Comunes

El elemento no se pega

Verifica que el contenedor padre tenga una altura mayor a la del elemento sticky y que no tenga overflow: hidden o overflow: auto que lo recorte.

Superposición con otros componentes

Ajusta z-index y, si es necesario, agrega margin-top al main equivalente a la altura del header sticky.

Problemas en Safari iOS

Asegúrate de que el elemento tenga un background definido y que no esté dentro de un transform aplicado al padre.