Uno de los efectos mas interesantes en menús de navegación es el famoso formato sticky o también conocido como menú pegajoso. Esto nos permite tener el menú de navegación (o cualquier otro elemento) donde queramos, pero al momento de scrollear y bajar en la pagina al llegar a su tope el menú quedara pegado a este por lo que en todo momento estará en pantalla.
Para comenzar tenemos que hacer la estructura básica del header y del menú.También es importante que recuerdes que para este menú tenemos que tener algo arriba de el, en este caso un logotipo.
La estructura html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <header> <div class="contenedor"> <div class="logo"> <img src="http://dummyimage.com/200x100/000/fff&text=LOGO" alt=""> </div> <nav class="menu"> <ul> <li><a href="#">Inicio</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Proyectos</a></li> <li><a href="#">Trabajos</a></li> <li><a href="#">Contacto</a></li> </ul> </nav> </div> </header> |
Como puedes ver en el header, hemos colocado un contenedor para el logotipo y el menu con una clase llamada .contenedor
esta clase la usaremos para centrar los elementos del menú.
Después del header es importante que tengas contenido para que aparezca un scroll y puedas bajar en la pagina para ver el menú en acción.
Código CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | .contenedor { width: 95%; max-width:1000px; margin:auto; } .contenedor p { margin-bottom:40px; } header nav { background:#3498db; margin-bottom:10px; } header nav ul { list-style: none; overflow: hidden; } header nav ul li { float: left; } header nav ul li a { display: block; padding:20px; color:#fff; text-decoration: none; } header nav ul li a:hover { background:#2980b9; } /* --- Clase que agregaremos cuando el usuario haga scroll --- */ .menu-fixed { position:fixed; z-index:1000; top:0; max-width:1000px; width:100%; box-shadow:0px 4px 3px rgba(0,0,0,.5); } |
Lo importante en este código CSS es que al final tenemos la clase .menu-fixed
esta clase no nos sirve de momento, pero lo que vamos a hacer con ella es que cuando el usuario haga scroll y baje en la pagina, al llegar a cierto punto le diremos con jquery que agregue esta clase a nuestro nav
. Esta clase lo que nos permite es posicionar el menú fijo a pantalla en lo mas alto de la pagina, esta clase nos sirve para ver cual sera el estado del menú al hacer scroll y llegar a determinado punto.
Esta clase la puedes agregar al nav si quieres probar como se vería y/o editar los estilos, pero recuerda que la debes de borrar cuando termines de probarla o trabajar con ella.
Lo siguiente es hacer es agregarle la clase .menu-fixed
al menú una vez que llegue a determinado punto. Cual es ese determinado punto? Bueno pues cuando la posición del scroll llegue al inicio del menú. Lo haremos con una condicional.
Código Jquery
1 2 3 4 5 6 7 8 9 10 11 12 | $(document).ready(function(){ var altura = $('.menu').offset().top; $(window).on('scroll', function(){ if ( $(window).scrollTop() > altura ){ $('.menu').addClass('menu-fixed'); } else { $('.menu').removeClass('menu-fixed'); } }); }); |
El codigo es sencillo, pero vamos por partes, primero queremos saber la distancia entre el menu y la parte mas alta de la pagina, asi que guardamos en una variable llamada altura este dato, para sacarlo hacemos uso del objeto offset.
Después vamos a ejecutar un evento, cada que el usuario haga scroll, es decir tanto si baja en pagina o si sube. Cada que haga scroll y ejecutemos este evento vamos a lanzar una condicional que revisara si la posición del scroll es mayor a la altura, si es asi, agregara la clase .menu-fixed
, de lo contrario la va a quitar, para que el menú regrese a su posición original.
Y con esto tendríamos nuestro menú de navegacion listo. Recuerda que con la clase .menu-fixed
puedes hacer lo que quieras, puedes hacer que al bajar en la pagina el menu se quede pegado pero que tenga el 100% de ancho, para eso a nuestra clase .menu-fixed
le haríamos las siguientes modificaciones:
1 2 3 4 5 6 7 8 9 | .menu-fixed { position:fixed; z-index:1000; top:0; /*max-width:1000px;*/ left:0; width:100%; box-shadow:0px 4px 3px rgba(0,0,0,.5); } |
Agregamos un left:0;
y le quitamos la restricción del ancho max-width:
.
Recurso: http://code.jquery.com/jquery-latest.js
Demo: demo.