Postition:sticky es una propiedad de CSS que permite que los elementos se adhieran a la parte superior de la pantalla cuando el usuario se desplaza hacia abajo. Esto puede ser útil para cosas como encabezados o menús de navegación. Sin embargo, existen algunos inconvenientes en el uso de esta propiedad. En esta publicación, exploraremos cómo usar postition:sticky y por qué no siempre funciona según lo previsto.
Para explicarles el funcionamiento voy a utilizar la siguiente plantilla de ejemplo:
En esta plantilla tenemos la estructura de una pagina web con un header, un main, un sidebar y un footer. Como pueden ver a momento de hacer scroll, todo se mantiene en su posición, pero lo ideal seria poder ver el contenido del sidebar mientras estemos viendo el contenido del main, entonces ahí vamos aplicar el posicionamiento sticky.
Antes de aplicar el posicionamiento sticky en un elemento debemos tener en consideración los siguientes puntos:
1.- El elemento padre (contenedor del elemento al cual vamos a aplicar position:sticky) debe ser mayor en altura o anchura al elemento hijo (contenedor al cual vamos a aplicar el posicionamiento sticky).
2.- Ninguno de los ancestros del elemento padre o hijo debe tener la propiedad overflow:hidden. En muchos de los casos esta es la causa por la que no les funciona el posicionamiento sticky así que mucho ojo con esto.
Aplicando el posicionamiento sticky a sidebar content
Sticky, hace que el elemento se comporte como en position:relative hasta que, debido al scroll de la página, el elemento es alcanzado por la parte superior del viewport (no es exactamente así, pero es el uso más habitual). En ese momento se comporta como fixed, y para que funcione correctamente hay que especificar al menos un valor top, bottom, left o right, en función de si va a ser sticky en un scroll horizontal o vertical.
Dicho esto, vamos a proceder a aplicar el posicionamiento sticky en sidebar content de la plantilla anteriormente mencionada
Sidebar content con la clase: contenido-sticky esta dentro del elemento con clase: sidebar-wrapper el cual a su vez esta dentro de la etiqueta main.
<main class ="container"><div class="main-wrapper"><h1>MAIN CONTENT</h1></div><div class="sidebar-wrapper"><div class="contenido-sticky"><h1>SIDEBAR CONTENT</h1></div></div></main>
La altura del elemento sidebar-wrapper, está dada por la altura del elemento hermano: main-wrapper por lo tanto los dos elementos van a tener la misma altura
.main-wrapper{height: 1000px;}
Añadimos la propiedad position:sticky, al elemento contenido-sticky
.contenido-sticky{background: green;position: sticky;top:0;}
Una vez añadido el posicionamiento sticky nos queda de la siguiente manera:
Como pueden observar, cuando el elemento es alcanzado por la parte superior del viewport, se comporta como fixed. El elemento se comportara como fixed hasta que su parte inferior tope con la parte inferior de su elemento padre.
Casos en los que no funcionara el posicionamiento sticky:
1.- Cuando el tamaño del elemento padre, es igual al del elemento hijo o cuando el elemnto padre no es scrollable, como en el siguiente caso:
2.- Cuando los ancestros del elemento padre o hijo tengan la propiedad overflow:hidden. En muchos de los casos esta es la causa por la que no les funciona el posicionamiento sticky así que mucho ojo con esto
Codigo utilizado en la plantilla Nº2:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Ejemplo: position:sticky</title><style>*{margin: 0;padding: 0;box-sizing: border-box;}body{max-width: 1000px;width: 100%;margin: 0 auto}header,footer,main{text-align: center;color: white;}header,footer,.main-wrapper{display: flex;align-items: center;justify-content: center;}header{background: red;}footer{background-color: blue;height: 400px;}main.container {display: grid;grid-template-columns: 60% 40%;}.main-wrapper{background: #746a6a;height: 1000px;}.sidebar-wrapper{background:#ff6a00;}.contenido-sticky{background: green;position: sticky;top:0;}h1{padding: 2rem 3rem;}p{padding: 0 3rem 1rem 3rem;}</style></head><body><header class ="container"><h1>HEADER</h1></header><main class ="container"><div class="main-wrapper"><h1>MAIN CONTENT</h1></div><div class="sidebar-wrapper"><div class="contenido-sticky"><h1>SIDEBAR CONTENT</h1></div><h1>SIDEBAR</h1></div></main><footer class ="container"><h1>FOOTER</h1></footer></body></html>
Publicar un comentario