Como crear una barra de menú que se vuelva fija al desplazar la hoja

Siguiendo con los temas de JQuery hoy vamos a ver un ejemplo sencillo de como crear una barra de menú que se mantenga fija o fixed en la parte superior de la hoja cuando nos desplazemos de arriba hacia abajo.

El css de estilo que voy a utilizar es lo muy básico para que la barra de navegación se vuelva fija, lo que sea que pongas dentro del menú (enlaces, botones, etc) queda a tu necesidad.

El css a utilizar es el siguiente:

Como notas lo importante aquí es el css básico para el menú. En #menu.fixed podrás ver que los parámentros left y width estan comentados, esto hará (con ayuda de JQuery) que la barra de menú tenga el mismo ancho que el contenedor. Ej:

menu1

Por el contrario si queremos que la barra de menú tome todo el ancho del navegador solo debemos descomentar esos dos parámetros para obtener este resultado:

menu2

Bien, el siguiente paso es añadir el contenido html del menú:

Lo importante aquí es el div del contenedor y el menú, lo demás lo utilizo de relleno para poder visualizar el efecto de la barra fija más adelante. Por último escribimos el código que permite hacer la barra fija.

Como indico en el código si lo que queres es que la barra tome todo el ancho entonces además de descomentar left y width en el css debemos comentar en JQuery las líneas de comando que asignan ancho.

A continuación también te lo dejo todo armado por si se te hace más fácil.

Por último no me puedo ir sin dejarte un demo para que veas como quedaría al final. DEMO.

Add a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *