Cómo hacer que el menú sea flotante

En algún momento hemos visto un blog que al deslizarnos verticalmente el menú también se desplaza,da una sensación de que el menu esta flotando. Puedes ver este efecto visitando este blog de pruebas.

Nosotros, y me incluyo, hemos deseado, querido saber como tener este bonito efecto en nuestro Blog pero tal vez se nos hace un poco complicado. Ya no, en esta ocasión veremos como lograr este efecto en nuestro blog con unos simples pasos.

Tutorial

Paso 1

<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' : '930px', 'top' : '0px'});
} else {
$flotarMenu.css({'position' : 'relative', 'top' : 'auto'});
}
});
});
//]]>
</script>

NOTA:
+ Si tu ya tienes integrado jQuery en tu blog, no agregues el codigo que esta de color gris (la primera línea)

+ El texto que esta de color azul es la ID del menú, normalmente esta ID es igual en todos pero te puedes fijar si es el mismo o no.

+ El número que esta de color rojo es el ancho del menú, esto si puede variar asi que es importante que te fijes el ancho de tu menú

Paso 2

#PageList1 {
width: 930px; /* Ancho del menú */
background: #000000; /* Color de fondo del menú */
z-index: 99;
}

 Aquí tenemos que colocar la misma ID y el ancho que colocamos en el primer codigo (script).
Lo que esta de color anaranjado simplemente es el fondo del menu.

Y listo eso es todo lo que tenemos que hacer para que nuestro menú sea flotante. Simplemente colocamos un script y unos estilos y eso fue todo para tener este bonito efecto.