C?mo hacer que el gadget de P?ginas se haga flotante al bajar el scroll

Hace alg?n tiempo vimos c?mo poner unos botones para compartir que se detienen y flotan al bajar la p?gina. Esta vez usando el mismo script conseguiremos el mismo efecto pero con el gadget de P?ginas. Lo que hace este c?digo es que al bajar el scroll de la p?gina el gadget de P?ginas flota y se mantiene visible, y una vez que se sube el scroll de la p?gina el gadget toma de nuevo su posici?n original.
En este blog de pruebas puedes verlo funcionando, sube y baja por la p?gina para ver c?mo se comporta el men?.

Para colocarlo en tu blog entra en Plantilla | Edici?n de HTML y antes de </head> pega lo siguiente:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>
<script>
//<![CDATA[
$(function() {
var $flotarMenu = $("#PageList1"),
$window = $(window),
offset = $flotarMenu.offset();
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$flotarMenu.css({'position' : 'fixed', 'width' : '880px', 'top' : '0px'});
} else {
$flotarMenu.css({'position' : 'relative', 'top' : 'auto'});
}
});
});
//]]>
</script>
<style>
#PageList1 {
width:880px; /* Ancho del gadget de P?ginas */
background:#fff; /* Color de fondo del gadget */
z-index: 99;
}
</style>

?Qu� hay que tener en cuenta si decides usarlo?

Si ya tuvieras jQuery omite la primera l?nea en color gris. Y si usaras Scriptaculous/Prototype deber?s hacer unos cambios.

Lo que est? en color rojo es el ID del gadget de P?ginas, as? que aseg?rate que el ID de tu gadget sea el mismo que el que se muestra en el c?digo, ya que algunas veces puede variar a #PageList2, #PageList3, etc. si as? fuera s?lo cambia lo que est? en rojo por tu verdadero ID.

Incluso puedes usarlo con cualquier otro men?, s?lo tendr?s que cambiar lo que est? en rojo por el ID de tu men?, aunque seguramente tendr?s que a?adir algunos estilos extras debajo de <style>

En color azul se establece el ancho del gadget. Si ves que queda muy angosto o muy ancho ah? es donde deber?s moverle.

Si usas la plantilla Fant?stico, S.A. (Awesome Inc.) sabr?s que el men? cubre todo el ancho de la pantalla, as? que quienes usen esa plantilla deber?n usar este c?digo en lugar del anterior:

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

<script>
//<![CDATA[
$(function() {
var $flotarMenu = $(".tabs-outer"),
$window = $(window),
offset = $flotarMenu.offset();
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$flotarMenu.css({'position' : 'fixed', 'width' : '100%', 'top' : '0px'});
} else {
$flotarMenu.css({'position' : 'relative', 'top' : 'auto'});
}
});
});
//]]>
</script>
<style>
.tabs-outer {
width:100%;
background: url(http://www.blogblog.com/1kt/awesomeinc/tabs_gradient_groovy.png) repeat scroll 0px 0px #000; /* Color de fondo */
z-index: 99;
}
</style>

En este caso no hace falta verificar el ID del gadget ni cambiar el ancho del gadget, pero en caso de que lo requieras puedes cambiar el color de fondo modificando lo que est? en negrita.

Como has podido ver la instalaci?n es de un solo paso y no hace falta hacer nada m?s excepto retocar algunos estilos en caso de ser necesario; y el resultado adem?s de ser muy llamativo puede ser muy pr?ctico para tus visitantes y para ti, sobre todo si quieres que tus lectores tengan siempre visibles y a la mano los enlaces de tu men?.