Cómo hacer que los elementos permanezcan pegados con CSS position: sticky

Introducción

Es posible que hayas utilizado la positionpropiedad CSS con los valores relativey absoluteen el pasado. Los navegadores web modernos ahora admiten el stickyvalor. Esto te permite hacer que los elementos se mantengan fijos cuando el desplazamiento llega a un punto determinado.

Un elemento position: stickyse comportará como un elemento posicionado relativamente hasta que alcance un punto específico y luego comience a comportarse como un elemento posicionado estáticamente.

En este artículo, crearás un ejemplo que te permitirá position: stickycomprender cómo se comporta y funciona.

Prerrequisitos

Si deseas seguir este artículo, necesitarás:

• Una comprensión de las propiedades y valores de CSS .
• Un editor de código.
• Un navegador web moderno que admite position: sticky.

Usandoposition: sticky

Considere un divcontenedor que será un contenedor flexible. En su interior habrá 4 divelementos adicionales anidados que serán los elementos flexibles. Los 4 divelementos contendrán imágenes para shark-1, shark-2, shark-3y shark-4.

En su editor de código, utilice el siguiente marcado:

div  div    img      src="/images/punk.png"           alt="Sammy the Shark with a punk theme."      /div  div    img      src="/images/pony.png"           alt="Sammy the Shark with a magical pony theme."      /div  div    img      src="/images/dino.png"           alt="Sammy the Shark with a dinosaur theme."      /div  div    img      src="/images/steampunk.png"           alt="Sammy the Shark with a steampunk theme."      /div/div

Y añade los siguientes estilos:

.container {  display: flex;  justify-content: space-around;  align-items: flex-start;  border: 2px dashed rgba(114, 186, 94, 0.35);  height: 400px;  background: rgba(114, 186, 94, 0.05);}.shark-1 {  position: sticky;  top: 0;}.shark-2 {  position: sticky;  top: 4rem;}.shark-3 {  position: sticky;  bottom: 1rem;  align-self: flex-end;}

En este ejemplo, la align-items: flex-startregla del contenedor flexible es importante porque, de lo contrario, los elementos flexibles tienen como valor predeterminado un valor stretchdonde los elementos ocuparían toda la altura del contenedor, cancelando el efecto fijo.

Nota: Consulte nuestra introducción a Flexbox si desea repasar las diferentes propiedades y valores de Flexbox.

Guarde este archivo y ábralo en un navegador web moderno:

Desplácese hacia arriba y hacia abajo y observe el stickycomportamiento. Observe cómo los elementos con posición fija solo lo son dentro de su elemento principal.

Advertencia: Hay dos situaciones comunes en las que un position: stickyelemento no se adhiere a la ventana como se esperaba:

No se ha definido ninguna propiedad de inserción: asegúrese de que el elemento fijo tenga topo bottomconfigurado. O en el caso del desplazamiento horizontal, lefto right.

Uno de los ancestros del elemento tiene valores incompatibles overflow: si alguno de los padres o ancestros del elemento fijo se han overflowestablecido en hidden, scrollo auto. Esto también se aplica a overflow-xy overflow-y.

El primer y el segundo tiburón son fijos en relación con la parte superior del bloque contenedor establecido por la ventana gráfica. El tercer tiburón es fijo en relación con la parte inferior del bloque contenedor establecido por la ventana gráfica. El cuarto tiburón no se desplazará a una posición fija porque no se le asignó position: sticky.

Conclusión

En este artículo, creaste un ejemplo que sirve position: stickypara comprender cómo se comporta y funciona.

A partir de 2020, el 95 % de los navegadores tienen algún nivel de compatibilidad con position: sticky. Para obtener más información, consulte ¿Puedo usar CSS position: sticky ? Las versiones anteriores de Safari requerirán el -webkitprefijo vendor. Asegúrese de que su público objetivo pueda utilizar esta función antes de incorporarla a sus aplicaciones web.

Si desea obtener más información sobre CSS, consulte nuestra página de temas de CSS para obtener ejercicios y proyectos de programación.