Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

Posicionamiento fijo solo con CSS

by
Difficulty:IntermediateLength:ShortLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Fijar elementos mediante posicionamiento Sticky, cuando el usuario se desplaza y alcanza determinado punto, se ha convertido en un patrón muy común en el diseño actual. Lo verás aplicado en sistemas de navegación superior, en sidebars, enlaces para compartir, o tal vez anuncios; conservando la visibilidad en todo momento aunque el usuario desplace la visualización.

Históricamente necesitábamos JavaScript para conseguirlo. Realmente, el comportamiento "sticky" ya había sido propuesto (y redactado) como un nuevo estándar (la posición sticky), permitiéndonos lograr el efecto mediante CSS puro. ¡Vamos a ver cómo funciona!

Posición Sticky

sticky es un nuevo valor de la propiedad position, añadido como parte de las Especificaciones del Módulo de Diseño o Esquema. Funciona de manera similar al posicionamiento relativo, en cuanto que no elimina ningún elemento del flujo del documento. En otras palabras, un elemento "sticky" no afecta a la posición de sus elementos adyacentes, y no hunde su elemento padre.

Tomemos el siguiente ejemplo, establecemos la posición del #sidebar a sticky y al mismo tiempo top: 10px. La propiedad top es requerida y especifica la distancia desde el borde superior del área de visualización de la página.

Ahora, conforme desplacemos la página, cuando la distancia del sidebar al borde superior alcance 0, el sidebar debería quedar fijo, proporcionándonos de manera efectiva una posición fija. En otras palabras, el valor sticky es una especie de híbrido entre el posicionamiento relativo (relative) y fijo (fixed).

Anidamiento

Adicionalmente, el posicionamiento sticky funcionará dentro de una caja deslizante o un elemento desbordado. Esta vez estableceremos el top a un valor de 15px para dar algo más de espacio sobre el sidebar cuando se posicione stickily (sí, esto es una palabra).

El sidebar permanecerá adherido (sticky) a todo lo largo de la altura de su padre (ej.: cuando el borde inferior del padre alcance el borde inferior del sidebar, lo empujará hacia afuera de la página una vez más.)  

Fácil, no?

Soporte

Si estás viendo estas demos en Chrome, Opera, o Internet Explorer (y Blink), te habrás dado cuenta ya de que no funcionan. Estos navegadores todavía no soportan el valor sticky.

Soporte de los navegadores de la posición CSS Sticky

En Chrome 28, cuando cambió al motor Blink, Chrome decidió eliminar la posición sticky de su código base, e incluso eliminó la opción para hacerlo viable a través de la página chrome://flags . El motivo de que sea así.

"La actual implementación de la posición sticky en Blink no se integra correctamente con la composición o el desplazamiento. Nosotros deseamos implementar la posición sticky, la implementación actual está abriendo el camino trabajando para mejorar el desplazamiento y la composición. Una vez el desplazamiento y la composición hayan mejorado, podremos volver a introducir la posición sticky de modo que se integre correctamente con el resto del sistema.

Una alternativa es aplicar un polyfill (código o plugin que permite tener nuevas funcionalidades) para simular el efecto en los navegadores que no la soportan.

Usando el Polyfill

Para ayudar a los navegadores que no lo soportan, usaremos stickyfil, desarrollado por Oleg Korsunsky. El polyfill trabaja perfectamente en varias circunstancias. Ya sea que el elemento designado tenga padding, márgenes, o bordes, hay sido flotado, o formado con unidades relativas como em y porcentajes, el polyfill imitará el comportamiento del posicionamiento CSS sticky. Y el uso de stickyfill es igualmente intuitivo.

Para empezar, consigue stickyfill.js (opcionalmente con jQuery, si estás más familiarizado y prefieres su uso para seleccionar elementos). Enlaza estas librerías dentro de tu documento HTML. Después inicia stickyfill con el elemento designado de la siguiente manera:

Si estás usando jQuery, podrías escribir esto que sigue en su lugar:

Ahora, nuestro sticky sidebar debería funcionar en todos los navegadores incluidos Chrome y Opera. El polyfill es suficientemente inteligente como para operar únicamente en los navegadores que no soportan el valor sticky, si es soportado será completamente deshabilitado, saltando a la implementación nativa del navegador.

Advertencias

Hay un par de cosas a tener en cuenta antes de que te lances a usar el posicionamiento sticky en tus websites.

  • Primero, la altura del contenedor padre debe ser mayor que el elemento con posicionamiento sticky.
  • Mientras Safari respalda de forma nativa el posicionamiento CSS sticky (aunque con prefijo), no tendrá efecto cuando el posicionamiento sticky sea usado sobre un elemento con el CSS display: table; . Esto es un fallo.
  • El polyfill tiene sus propias deficiencias, no funcionará dentro de un elemento  desbordado.
  • Hasta la fecha en las que ha sido escrito este artículo, no existe un gestor de eventos JavaScript para sticky que identifique cuando el elemento está fijo. Un evento así sería útil, por ejemplo, para añadir classes adicionales cuando el elemento esté en estado fijo, independiente del desplazamiento del resto del contenido.

Conclusiones

La posición CSS sticky podría ser una herramienta brillante si simplemente necesitaras posicionar así un sencillo elemento. Si tus necesidades van más allá – digamos que quieres añadir efectos sofisticados al elemento con la posición sticky – será mejor que optes por una librería JavaScript como Waypoints.js con su modulo sticky.

No obstante, esperamos ver mejoras futuras en a implementación del CSS de sticky, tanto respecto a sus funcionalidades como a su respaldo  por parte de los navegadores muy pronto.

Más Referencias

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.