¿Qué es position: sticky y cómo puedo crear una cabecera fija al hacer scroll?
Aprende qué es position: sticky; en CSS, un híbrido entre relative y fixed, y cómo usarlo para crear cabeceras que se pegan al hacer scroll.
position: sticky; es un valor de la propiedad position en CSS que ofrece un comportamiento híbrido entre position: relative y position: fixed.
Un elemento con position: sticky; se trata inicialmente como si tuviera position: relative (fluye normalmente con el contenido de la página), pero cuando el usuario hace scroll y el elemento alcanza un punto específico (un «umbral» u «offset») con respecto a su bloque contenedor de scroll más cercano (que suele ser la ventana gráfica o viewport, pero puede ser un ancestro con overflow distinto de visible), se «pega» a ese punto y se comporta como si tuviera position: fixed; hasta que el scroll lo saca de los límites de su contenedor padre.
Cómo funciona:
- El elemento se renderiza en su posición normal dentro del flujo del documento.
- Debes especificar al menos una propiedad de desplazamiento (
top,right,bottom, oleft) para indicar el umbral en el que el elemento debe «pegarse».
Por ejemplo,top: 0;significa que el elemento se pegará en la parte superior de su contexto de scroll cuando, al desplazarse, el borde superior del elemento intente pasar por encima del borde superior de dicho contexto. - El elemento solo será «pegajoso»" (sticky) dentro de los límites de su elemento contenedor padre. Si el padre se desplaza fuera de la vista, el elemento «sticky» también lo hará.
Cómo crear una cabecera fija al hacer scroll (Sticky Header):
Este es uno de los usos más comunes para position: sticky;.
HTML (Estructura básica):
<body>
<header class="mi-cabecera-sticky">
<h1>Logo</h1>
<nav>...</nav>
</header>
<main>
</main>
</body>
Lenguaje del código: PHP (php)CSS:
.mi-cabecera-sticky {
background-color: #f8f9fa; /* Es importante darle un fondo para que no sea transparente */
padding: 10px 20px;
border-bottom: 1px solid #dee2e6;
/* La magia del sticky header */
position: -webkit-sticky; /* Para compatibilidad con versiones más antiguas de Safari */
position: sticky;
top: 0; /* Se pegará a 0px del borde superior del viewport cuando se alcance */
z-index: 1020; /* Asegura que la cabecera esté por encima de otros contenidos */
}
/* Es importante que el body o algún contenedor padre tenga suficiente contenido
para que haya scroll y se pueda apreciar el efecto sticky. */
body {
/* Ejemplo de mucho contenido */
min-height: 200vh; /* Para forzar el scroll */
}Lenguaje del código: PHP (php)Con este CSS, .mi-cabecera-sticky se desplazará normalmente con la página hasta que su borde superior esté a punto de salir de la parte superior de la ventana gráfica. En ese momento, se quedará fija en la parte superior (top: 0;) mientras el usuario continúa haciendo scroll hacia abajo (siempre y cuando su elemento contenedor padre siga siendo visible o abarque esa área).
Es una forma moderna y eficiente de crear cabeceras «pegajosas» sin necesidad de JavaScript para la funcionalidad básica.
