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ú.

Imprimir artículo