Sidebar deslizante (scroll) con jQuery

Hoy agregaremos un "efecto" a nuestra sidebar que servirá para que la barra lateral (sidebar) acompañe al contenido de nuestro blog mientras bajamos o subimos la página. Y con jQuery le agregaremos un toque especial a ese desplazamiento de la sidebar.

La vista previa la pueden ver en el blog de pruebas. Ahí puedes probar a subir y bajar por la página para ver el efecto.

( ↪ Ver DEMO)

Les enseñaré a implementarlo, tanto en las plantillas antiguas (clásicas) así como en las plantillas nuevas del Diseñador de plantillas.

PLANTILLAS CLÁSICAS

1.§ Vamos a Plantilla - Editar HTML.

2.§ Ahora lo que haremos será agregar la libreria jQuery, claro que si ya la tenemos en nuestra plantilla no será necesario agregarla nuevamente y de ser así podemos pasar al paso número 5.§ .

3.§ Damos un clic dentro del código de la plantilla, presionamos CTRL+F y buscaremos la etiqueta </head>.

4.§ Encima de </head> pegaremos lo siguiente:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

5.§ Ahora agregaremos el siguiente script debajo de la librería jQuery que agregamos en el paso anterior.

<script type='text/javascript'>
$(function() {
var $sidebar = $("#sidebar"),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 15;
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});
});
</script>

6.§ Ahora agregaremos los estilos. Para ello buscamos, siguiendo las indicaciones del paso 3.§, ]]></b:skin> y encima de éste, agregaremos lo siguiente:

#page-wrap {
width: 660px;
margin: 15px auto;
position: relative;
}

#sidebar {
width: 220px;
}

7.§ Vamos a modificar los valores de ancho (width) con los valores de nuestro blog. En primer lugar buscaremos #outer-wrapper. Debajo veremos el ancho de nuestro blog, algo así: width: 660px; Copiaremos el número (en este caso 660) y lo pegaremos en el width de #page-wrap

En segundo lugar buscaremos #sidebar-wrapper. Veremos el ancho de la sidebar de nuestro blog algo así: width: 220px; Igual que en el caso anterior, copiaremos el número (en este caso 220) y lo pegaremos en el width de #sidebar de los estilos que agregamos en el paso 6.§.

8.§ Vemos que todo esté bien y damos clic en Guardar plantilla.

PLANTILLAS DEL DISEÑADOR DE PLANTILLAS

1.§ Hacemos los pasos del 1.§ al 4.§ del apartado anterior.

2.§ Ahora agregaremos el script debajo de la librería jQuery, pero debemos de tener en cuenta los siguiente: si nuestra sidebar está en el lado izquierdo cambiaremos #sidebar-right por #sidebar-left. Si nuestra sidebar está en el lado derecho, dejaremos el código tal como está.

<script type='text/javascript'>
$(function() {
var $sidebar = $("#sidebar-right"),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 15;
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});
});
</script>

3.§ Ahora agregaremos algunos estilos CSS. Buscamos ]]></b:skin> y encima de éste, agregaremos el código de abajo.

Aquí también tenemos que tener en cuenta que, si la sidebar está en el lado izquierdo, cambiamos right por left:

#page-wrap {
width: 960px;
margin: 15px auto;
position: relative;
}

#sidebar-right {
width: 310px;
}

4.§ Ahora vamos a modificar los valores width con los de nuestro blog. En primer lugar buscaremos la siguiente línea, que nos indica el ancho total de nuestro blog (en cada blog los valores pueden ser diferentes):

<b:variable default='960px' name='content.width' type='length' value='960px'/>

Compiamos el último número de la línea, no el primero y lo pegamos en el width de #page-wrap

5.§ En segundo lugar, buscaremos la siguiente línea, que nos indica el ancho de nuestra sidebar:

<b:variable default='310px' name='main.column.right.width' type='length' value='310px'/>

Como en el paso anterior, copiamos el último número de la línea y lo pegamos en el width de #sidebar-right

* Para los que tienen la sidebar en el lado izquierdo, buscan la línea: <b:variable default='310px' name='main.column.left.width' type='length' value='310px'/> y copian el último valor en #sidebar-left

6.§ Finalmente, buscaremos esta línea:

<div class='column-right-outer'>

Y la cambiaremos por esta:

<div class='column-right-outer' id='sidebar-right'>

* En el caso que nuestra sidebar esté en el lado izquierdo, buscaremos esta línea:

<div class='column-left-outer'>

Y la cambiaremos por esta:

<div class='column-left-outer' id='sidebar-left'>

7.§ Damos clic en Guardar plantilla.