Hay ocasiones en que necesitamos que el menú de un sitio web permanezca en la parte superior del navegador cuando hacemos scroll hacia abajo. Para lograr esto, podemos crear un menú y mediante jQuery lograr que al ocultarse de la vista, se coloque en la parte superior de la pantalla por encima de cualquier elemento.
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 :
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 un calculador 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 con scrollTop, 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 :
Finalmente el CSS:
Código :
Los estilos menu-contenedor y menu deben ser del mismo alto, así cuando se “independice” menu de su padre, no quedará un hueco, de ser así se recorrería todo hacia arriba causando otro desplazamiento, devolviendo el objeto a sus estado estático, o si lo quieres llamar “ciclado”.
Con eso ya debería funcionar, disfruta tu menú autoajustable.
Nota: Iba a subir un ejemplo, pero Taringa quito las descargas...
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 :
<!DOCTYPE html>
<html>
<head>
<title>Menú autoajustable</title>
<link rel="stylesheet" type="text/css" href="estilo.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
// Aquí irá todo nuestro código necesario
</script>
</head>
<body>
<div id="page">
<div id="cabeza"></div>
<div id="menu-contenedor">
<ul id="menu">
<li><a href="#">Elemento 1</a></li>
<li><a href="#">Elemento 2</a></li>
<li><a href="#">Elemento 3</a></li>
</ul>
</div>
<div id="contenido"></div>
</div>
</body>
</html>
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 un calculador 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 con scrollTop, 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');
var menu_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;
display: block;
line-height: 50px;
}
#contenido {
height: 700px;
background: green;
}
.menu-fijo {
position: fixed;
top: 0;
width: 900px;
}
Los estilos menu-contenedor y menu deben ser del mismo alto, así cuando se “independice” menu de su padre, no quedará un hueco, de ser así se recorrería todo hacia arriba causando otro desplazamiento, devolviendo el objeto a sus estado estático, o si lo quieres llamar “ciclado”.
Con eso ya debería funcionar, disfruta tu menú autoajustable.
Nota: Iba a subir un ejemplo, pero Taringa quito las descargas...