Viktor H. Morales

Diseñador gráfico y Web. WordPress. Emprendedor. Viajero.

Barra lateral fija solo con CSS (position: sticky)

  • 27.Mar.2018

Comencé a trabajar en el diseño web de mi primer cliente en Italia y decidí añadirle la característica “barra lateral fija (o “pegajosa” según su termino en inglés).

¿Cómo funciona?

Nota: funciona solo en PC o Tablets donde la barra se muestra a la izquierda del contenido, ya que en dispositivos móviles hago que esa barra lateral se muestre al pie de página donde el efecto pierde sentido.

Si se desplazan hacia arriba o abajo mientras leen este artículo, pueden ver una demostración de como funciona esta barra lateral “pegajosa”; también pueden explorar la solapa “Result” del código que comparto a continuación.

Código

Comparto el código para que puedan implementarlo en cualquier web.

Pueden encontrar más características en mi sitio en jsfiddle.com

¿Necesitas una característica especial en tu sitio web?

Deja tus comentarios!