Sticky significa pegajoso, y Position Sticky es una nueva propiedad de posición de las 4 que anteriormente existían, Relative, Absolute, Fixed y Static.
Comparte ciertas características de las anteriores. Relative y Static mantienen su posición en el documento, mientras que Absolute y Fixed flotan.
Para entender mejor su funcionamiento tenemos que entender que depende de dos componentes, el primero es el elemento que quedará "pegado" y el segundo el elemento al cual se pegará. Esto quiere decir que un elemento sticky puede estar dentro de otro elemento que ocupe un espacio fijo en el documento, por lo que el elemento sticky se moverá hasta el final del elemento que lo contiene.
Si no se define un elemento contenedor, contenedor padre lo es por default.
Para explicar mejor su funcionamiento a continuación presento un par de ejemplos.
Supongamos que tenemos una barra de navegación debajo del cover de nuestro sitio, pero al momento de hacer scroll down deseamos que esta barra de navegación quede pegada al tope superior del sitio mientras hacemos scroll. Antes hubiera sido necesario algún tipo de script que cambiara o agregara una clase con una propiedad position: fixed para lograrlo, ahora sólo tenemos que definir la propiedad sticky.
body {
position: relative;
}
.nav {
position:sticky;
}
See the Pen
Position Sticky Ejemplo de Uso 1 by CSS Tianguis (@css-tianguis)
on CodePen.
Otro ejemplo de uso es contener un elemento sticky dentro de contenedores apilados con una altura definida ya sea por contenido o con una altura fija, así este elemento se desplazará hasta el final de cada elemento padre.
.contenedor-padre {
position: relative;
}
.elemento-sticky {
position:sticky;
}
See the Pen
OGQZxM by CSS Tianguis (@css-tianguis)
on CodePen.
Amazon Auto Links: No products found.