Cómo hacer fijo un elemento de la sidebar
En más de una ocasión necesitamos que un elemento de la sidebar permanezca fijo en su posición, mientras que el resto de elementos de la página se desplazan cuando hacemos scroll. Este efecto lo podemos utilizar para mantener fijo un contenido que por su importancia, necesitamos que esté siempre visible, por ejemplo un formulario de inscripción o una información relevante.
Como siempre, este efecto podemos hacerlo mediante el uso de un código o mediante un plugin. Vamos a ver las dos formas, pero te aconsejo, como siempre, que lo hagas mediante código y te ahorres un plugin.
Hacer fijo un elemento de la sidebar mediante código
Lo primero que debemos hacer es saber (localizar) el elemento que vamos a mantener fijo en nuestra sidebar. Para ello, nos ponemos sobre ese objeto y con el botón derecho del ratón elegimos la opción Inspeccionar.
A continuación, en el panel que se abre (ya sea en la parte derecha de la ventana o en la parte inferior), buscamos el nombre de dicho elemento. En este caso se llama media_image-2, este identificador se ve en la misma línea seleccionada (id=»media_image-2«).
Una vez localizado el nombre del elemento, tenemos que fijarnos que es un id y no una clase. ¡Ojo!, también podemos utilizar la clase para mantener fijo este objeto, el único inconveniente si utilizamos la clase (class=»widget widget_media_image«), es que si vamos a añadir más widgets como este (en mi caso una imagen), al utilizar la clase, aplica el efecto a todos los elementos (a todas las imágenes que yo inserte en la sidebar en mi caso). Sin embargo, si utilizo el id, estoy completamente seguro de que va a ser un nombre único, y que no habrá otro elemento en mi web que se llame igual.
Añadir el código que hará fijo al elemento
Una vez que sabemos que utilizaremos el id del objeto, y sobre qué objeto vamos a trabajar, nos dirigimos al Escritorio y vamos al menú Apariencia, Personalizar. En la ventana que se abre escribimos el siguiente código:
#media_image-2 {
position:fixed;
}
En esta misma ventana podemos mover la rueda del ratón y veremos que el objeto permanece fijo mientras se desplaza el resto de la sidebar.
El elemento que hemos mantenido fijo se superpone a otro elemento de la sidebar
Es posible que el elemento que hemos convertido en fijo se superponga al resto de elementos de la sidebar, esto lo podemos solucionar de una forma muy sencilla cambiando el orden de los elementos en el panel de Widgets:
Como norma general, el elemento o elementos que queramos mantener fijos, los colocaremos en la parte inferior del widget que le corresponda, así nos evitamos problemas de superposición de objetos en la sidebar.
Hacer fijo un elemento de la sidebar mediante un plugin
Si prefieres utilizar un plugin para realizar este proceso, te puedo recomendar el plugin llamado Q2W3 Fixed Widget. Este plugin es muy sencillo de utilizar y liviano en su carga. Tan solo añade una casilla de verificación a cada widget, que debes activar para mantener ese elemento concreto en una posición fija.
En realidad, no necesitamos ninguna opción más para realizar este efecto, pero si quieres tener un poco más de control, puedes ir al menú Apariencia, Opciones de Widget Fijo.
