Ing. Sistemas

Me refiero a esto. Veamos un layout muy sencillo para el ejemplo que les voy a dar:




Haremos lo siguiente para lograr esto.

La estructura HTML
Código :



Menú autoajustable// Aquí irá todo nuestro código necesario







Elemento 1
Elemento 2
Elemento 3







Nótese que el menúrequiere un contenedor para poder lograr la función esperada. También el espacio (elemento) de Javascript vacío.

El Javascript y jQuery

La librería jQuery entre tantas de sus funciones, cuenta con uncalculador de la posición absoluta de un elemento, aún si este no tuviera el estilo position en absolute. Para obtener dicha posición, vamos a utilizar la función offset, y si lo comparamos conscrollTop, podremos saber si parte del menú ha salido de la vista del usuario. El código lo pondremos en el elemento script antes mencionado.

Código :
// Hay que recordar la importancia de comenzar
//a ejecutar javascript cuando termine de cargar
// la página para evitar inconscistencias.
$(document).ready(function() {
var menu = $('#menu');
var contenedor = $('#menu-contenedor');
varmenu_offset = menu.offset();
// Cada vez que se haga scroll en la página
// haremos un chequeo del estado del menú
// y lo vamos a alternar entre 'fixed' y 'static'.
$(window).on('scroll',function() {
if($(window).scrollTop() > menu_offset.top) {
menu.addClass('menu-fijo');
} else {
menu.removeClass('menu-fijo');
}
});
});

Finalmente el CSS:
Código:
/* Para evitar margenes y espacios */
* { margin: 0; padding: 0; }

#page {
width: 900px;
margin: 0 auto;
}

#cabeza {
background: #900;
height: 200px;
}#menu-contenedor {
height: 50px;
}

ul#menu {
padding: 0;
height: 50px;
background: #dfd;
}

ul#menu li {
display: inline-block;
}

ul#menu li a {
padding: 0 10px;...