En ocasiones es posible que deseemos que al hacer scroll, una columna o sidebar se quede fija cuando llegue a la parte superior del navegador. Esto es muy útil cuando hay un contenido muy largo y queremos que lo que mostramos en el sidebar se quede siempre a la vista del usuario.

Para ello hay un plugin muy conocido y descargado, el Q2W3 Fixed Widget. Este plugin cuenta con más de 100.000 instalaciones activas en estos momentos, y es realmente sencillo de utilizar, pero es posible que no nos sirva en algunos casos.

Hace poco estaba usando un tema que cuenta con dos columnas, una a cada lado del tema. Y para colmo, ni siquiera eran sidebars, si no que eran dos divs. En este caso, el plugin mencionado poco nos sirve, pues aunque nos deja incluir ID’s en las opciones, no nos deja incluir clases.

En estos casos podemos usar el script jSticky, que nos ofrece una mayor flexibilidad.

Una vez descargado y subido a nuestro servidor, tendremos que modificar la página donde queramos usarlo y añadir el script e incluir el script, colocando la ruta exacta de donde lo hemos subido:

Aunque obviamente, lo ideal es usar las funciones de WordPress para incluir este script.
Una vez incluido añadiremos el código que lo hace funcionar:

En este caso localiza el contenido con el ID foo y le asignamos las siguientes opciones:

  • topSpacing: margen superior en píxeles, para que no quede muy pegado a la parte superior del navegador.
  • zIndex: posición de profundidad. Cuando dos elementos ocupan el mismo lugar, el que tenga mayor zIndex, se colocará encima.
  • stopper: especifica la clase o ID donde la columna dejará de estar fijar. Por ejemplo el footer.

En lugar de un ID podemos darle una clase:

Pero recordar que si hay más de una clase que se llama igual, afectará a todas.

Y para los usuarios de Adsense, recordar que Google PROHÍBE terminantemente colocar anuncios fijos de este modo. Así que si no queréis ser expulsados del programa, no uséis esta técnica en ningún lugar que incluyan anuncios de este tipo.