A veces, creamos entradas con mucho contenido y muy largas generándose un vacío en la sidebar y podría ser interesante mantener visible un widget que quede accesible en todo momento para el usuario.
Para solucionar esto podríamos utilizar un script en el contenedor que queremos tener siempre visible, ya sea un menú, redes sociales, etc...
Instalación
Lo primero será situar el widget al final de la sidebar.
Luego localizamos en la plantilla el "id" o nombre del elemento al que queremos añadir el script.
En nuestra plantilla ->Edición HTML sin expandir los elementos veremos algo como esto:
<b:widget id='HTML4' locked='false' title='' type='HTML'>...</b:widget>
<b:widget id='HTML9' locked='false' title='Anúnciate aquí' type='HTML'>...</b:widget>
<b:widget id='HTML1' locked='false' title='Partidos S.F.C.' type='HTML'>...</b:widget>
<b:widget id='Label1' locked='false' title='¿Que buscas?' type='Label'>..</b:widget>
Lo que está en rojo es la "id" de cada widget, imaginemos que vamos a ponerle el script a nuestras etiquetas "Label1".Una vez entendido la "id" de cada widget, colocaremos antes de </body> el siguiente script:
<script type='text/javascript'>
$(function () {
var offset = $("#Label1").offset();
var topPadding = 0;
$(window).scroll(function () {
if ($(window).scrollTop() > offset.top) {
$("#Label1").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
})
} else {
$("#Label1").stop().animate({
marginTop: 0
})
}
})
});
</script>
Reemplazaremos el "id" del widget, que en el código es Label1, por el que queremos mostrar. Guardamos cambios y listo.
El widget ahora debería desplazarse con la página.
La demo la podéis observar en mi sidebar.