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 :
<!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.
Te dejo el ejemplo aquí.
¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.
Por willi el 11 de Marzo de 2013
willi-blog :
No tiene virus. Yo controlo todos los archivos. Le pasé el antivirus y no detectó nada. Además lo abrí para ver el contenido y realmente no tiene nada de malo.
Por Franco Montenegro el 12 de Marzo de 2013
contenedor -> No lo estás usando
Franco Montenegro-blog :
contenedor -> No lo estás usando
Tienes razón, se quedó con las pruebaa, y con lo de windows también, son cosas que se pasan. Pero vamos a preocuparnos si no funciona. Gracias por el aviso.
Por RitzCOP el 13 de Marzo de 2013
Por FLC el 13 de Marzo de 2013
Muchas gracias,
MaoAiz :
Muchas gracias,
Así es, a veces la solución es más fácil de lo que parece.
NeoCesar :
Es bueno saberlo, gracias por leerlo.
Por maurilop el 08 de Junio de 2013
maurilop-blog :
Sí, puedes agregar un else if del scrollTop
Por RINGO_thehunter el 17 de Julio de 2013
http://elcomercio.pe/
Yo veo que cuando alcanza cierta altura cambia el nombre de la clase del div que contiene el menú.
Graciass!!
RINGO_thehunter :
http://elcomercio.pe/
Yo veo que cuando alcanza cierta altura cambia el nombre de la clase del div que contiene el menú.
Graciass!!
Lo veo igual, con la diferencia de que también muestra el logo pequeñoa estaba oculto del lado izquierdo, si son float, se recorrá el menú solo a la derecha
Por RINGO_thehunter el 17 de Julio de 2013
cambia de :
<div class="main-nav" id="main-nav">
<div class="menu-fixed">
<div class="menu">
</div>
</div>
</div>
a
<div class="main-nav fixed" id="main-nav">
<div class="menu-fixed">
<div class="menu">
</div>
</div>
</div>
por lo que veo agrego la clase fixed cuando recorre cierta altura y por esa clase es que cambia el position, antes de eso el position no era fixed.
Por Erik el 19 de Agosto de 2013
Por xalada el 16 de Septiembre de 2013
Muchas gracias. estoy haciendo un proyecto para una embajada y me urge.
Un saludo
Por xalada el 16 de Septiembre de 2013
xalada-blog :
Muchas gracias. estoy haciendo un proyecto para una embajada y me urge.
Un saludo
Bueno, mira, en realidad la que yo uso es la 1.9, no la 2.
Para utilizar diferentes versiones de jquery
http://api.jquery.com/jQuery.noConflict/
Suerte
Por xalada el 17 de Septiembre de 2013
xalada-blog :
Qué bien
Por caampa el 05 de Octubre de 2013
<A HREF=pag1.html#> PAG1</A>
para que al pinchar en PAG1 me muestre el contenido de esa página. El problema viene que me abre el otro html como si no estubiese utilizando jquery pues no me mantiene el menu fijo.
Como aporte más puedo decir que he abierto el zip que tienes de ejemplo y he modificado en enlaces poniendo en el link un html para ver si lo abria manteniendo el menu y tampoco lo mantiene.
Es posible que necesite alguna libreria????
No se que más probar...
Por Roberto el 29 de Octubre de 2013
Por Donatilo Castillo el 19 de Diciembre de 2013
Pero yo tengo otra incertidumbre, soy nuevo en esto y hay algo que me gustaria saber y es lo siguiente: ¿Como puedo hacer que el menu se quede siempre estable?, que aunque presione algun boton y me lleve a otra pagina, el menu siempre permanezca en la parte superior.
Me gustaria que me dijeras si hay alguna forma.
Gracias de antemano.
Donatilo Castillo-blog :
Pero yo tengo otra incertidumbre, soy nuevo en esto y hay algo que me gustaria saber y es lo siguiente: ¿Como puedo hacer que el menu se quede siempre estable?, que aunque presione algun boton y me lleve a otra pagina, el menu siempre permanezca en la parte superior.
Me gustaria que me dijeras si hay alguna forma.
Gracias de antemano.
Eso de que la página se va hacia arriba es porque tengo en los enlaces el signo de número "#", pero si lo remplazas por el verdadero link, entonces no sucederá lo que mencionas
Roberto -blog :
¡Genial! da gusto que te haya funcionado
caampa-blog :
<A HREF=pag1.html#> PAG1</A>
para que al pinchar en PAG1 me muestre el contenido de esa página. El problema viene que me abre el otro html como si no estubiese utilizando jquery pues no me mantiene el menu fijo.
Como aporte más puedo decir que he abierto el zip que tienes de ejemplo y he modificado en enlaces poniendo en el link un html para ver si lo abria manteniendo el menu y tampoco lo mantiene.
Es posible que necesite alguna libreria????
No se que más probar...
Mira, no entiendo muy bien lo que tratas de explicar, pero unas observaciones para ver si estamos en la misma sintonía
Por cgomez el 18 de Enero de 2014
jQuery
snippet: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
No se porque tengo un conflicto pues ya tengo un document ready en mi aplicacion, porke estoy usando un carrousell skitter y hago el llamado a la funcion, puse el codigo del menu despues de mi codigo para el corusell pero me da el siguiente error:
TypeError: $(...).on is not a function
$(window).on('scroll', function() {
y si agrego la libreria tuya de jquery el carusel no funciona
cgomez :
jQuery
snippet: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
No se porque tengo un conflicto pues ya tengo un document ready en mi aplicacion, porke estoy usando un carrousell skitter y hago el llamado a la funcion, puse el codigo del menu despues de mi codigo para el corusell pero me da el siguiente error:
TypeError: $(...).on is not a function
$(window).on('scroll', function() {
y si agrego la libreria tuya de jquery el carusel no funciona
Prueba usando jQuery(...) en lugar de $(...)
Por veo_mostros el 26 de Febrero de 2014
veo_mostros-blog :
En la posición de Y sería y+100 y en la comparación sería -100. No sé si me expliqué.
Por veo_mostros el 26 de Febrero de 2014
podrías hacerlo más visual ...
gracias
Por michelle mendoza el 06 de Marzo de 2014
Por adriana el 27 de Marzo de 2014
Por Josué el 14 de Julio de 2014
Por Zion711 el 17 de Agosto de 2014
Por el 12 de Enero de 2015
Por XC el 15 de Junio de 2015
.menu-fijo {
position: fixed;
top: 0;
width: 900px;
}
Eso es todo lo que se necesita
Por mauricio el 20 de Junio de 2015
Saludos!!
Por Rastalextremo el 06 de Agosto de 2015
Por Francisco Miranda el 04 de Febrero de 2016
Por Gerardo el 25 de Noviembre de 2016