Aprende como hacer sticky tu contenido
Hace días escuchaba un episodio del podcast syntaxfm y hablaban sobre cuándo usar cada tipo de posición de CSS: position: static | relative | absolute | fixed | sticky. Resulta que nunca había usado position: sticky y tampoco entendía muy bien cómo utilizarla, por eso decidí ver como funciona y escribir acerca de eso. Primero, veamos que es position.
CSS Position
La propiedad position es una de las más utilizadas en CSS. En el DOM cada elemento es representado como una caja y con esta propiedad, podemos manipular la ubicación del elemento dentro de nuestro documento.
Position puede ser declarado de las siguientes maneras:
position: static | relative | absolute | fixed | sticky
Adicional, para poder posicionarlo, es necesario declarar alguno de los siguientes valores: top | left | right | bottom.
Las posiciones static y relative se posicionan de acuerdo con el flujo normal de la página manteniendo su espacio natural dentro del documento, Por otro lado, los elementos con posición absolute o fixed dejan de ocupar un espacio relativo con relación a los demás elementos del DOM. En otras palabras, podemos decir que estos elementos pierden la gravedad, se alejan y comienzan a flotar.
Para mayor información: Documentación de position.
CSS Position Sticky
Un elemento con position:sticky es un híbrido de posiciones relativas y fijas, inicialmente se comporta como position:relative, es decir, mantiene su espacio natural en el DOM hasta alcanzar cierto umbral, y luego se comporta como position:fixed.
Un excelente ejemplo podemos encontrarlo en el website del syntax.fm; El player del podcast está posicionado a uno 300px aproximadamente de la parte superior y cuando comienzas a desplazarte y el player llega al top de la página, este queda fijo en la parte superior.
Exploremos con otro ejemplo para entender un poco mejor.
En el ejemplo tenemos dos <nav>:
- El primero al top del site.
- El segundo (de color verde) se encuentra un poco más abajo y tiene
position: sticky.
Al hacer scrolling y llega al punto donde está nuestro elemento sticky fija su posición.
Es importante resaltar la necesidad de utilizar al menos un valor top, bottom, left o right para definir donde quedará fijo nuestro elemento de acuerdo al scroll, en este caso declaramos un valor top para que quede fijo al top: 0 del viewport.
Veamos otro ejemplo, pero esta vez cambiando el valor a bottom: 0.
En este caso nuestro elemento con position: sticky es el footer y está ubicado en la parte inferior del documento.
Evitar uso de overflow
Es importante saber que overflow: auto|scroll|hidden y sticky no son buenos amigos, ya que cuando un div padre de un elemento con position:sticky tiene declarado overflow, el navegador no puede calcular cuándo el elemento sticky tiene que estar fijo
Para mayor información: deficiencias de position: stycky; y overflow.
Browsers Support
- Es soportado por la mayoría de browsers a excepción de IE y antiguas versiones
Artículos de Interés
Conclusión
Tiempo atrás este tipo de cosas se podía hacer solo mediante Javascript, es fantástico que podamos hacerlo ahora solo con CSS y que además sea fácil de implementar.
Gracias por leer y compartir :)