Aprende como hacer un menú de navegacion pegajoso con deslizamiento.

Share on Pinterest
Comparte con tus amigos










Enviar

Uno de los efectos mas interesantes en menús de navegacion es el famoso formato sticky o también conocido como menú pegajoso. Este menú de navegacion nos permite tener el menú de navegacion (o cualquier otro elemento) en 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.

Aquí tienes un demo de este interesante menú:
http://falconmasters.com/demos/menu_pegajoso/

Recursos:

Jquery: http://code.jquery.com/jquery-latest.js

Tutorial:

Para comenzar tenemos que hacer la estructura básica del header y del menú, yo en mi caso voy a crear la estructura que te mostré en el demo. También es importante que recuerdes que para este menú tenemos que tener algo arriba de el, en mi caso un logotipo.

La estructura html es la siguiente:

	<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, he puesto 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.

Para el código CSS no hacemos nada especial, un simple y ordinario menú como los que hemos hecho toda la vida.

Código CSS del menú:

.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 único importante a resaltar 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ú. Pero esto lo vamos a hacer con una condicional, asi que aquí pongo el código y ahora lo explico.

Código Jquery:

$(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:

.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);
}

Simplemente agregamos un left:0; y le quitamos la restricción del ancho de max-width:;

Espero que te haya gustado este tutorial, comenta que te pareció, si te gusto y nos vemos en otro tutorial!

Video tutorial: Como hacer un menú pegajoso / sticky menu con HTML, CSS y Javascript

Share on Pinterest
Comparte con tus amigos










Enviar

FalconMasters Carlos Arturo

57 respuestas a “Como hacer un menú de navegacion pegajoso (Sticky menu)”

  1. joanestradac dice:

    ¡Hoy estoy de suerte! Justo ahora había acabado el header de mi web ( con tu curso :P) y me he dicho: Estaría muy bien que pudiese hacer que al hacer scroll down en mi web el estuviese de forma fija!!

    ¡Y aquí llegas tu! xD

    ¡Muchas gracias por tus fantásticos tutoriales y te deseo un feliz 2015!

    ¿PD: Dónde puedo hostear mi web gratis?

  2. david dice:

    Hola que tal FalconMaster, buen tutorial mi pregunta es como agregar un submenu en proyectos en el menu que creaste, tendria que darle los mismos valores que el menu en el css o crear otra clase gracias espero tu respuesta.

  3. Fascomp dice:

    Estimado muy buen post y que bien explicado, solo un alcance: Yo hubiera puesto la palabra «Fijo» en ves de «Pegajoso» le da otro toque mas sobrio. Muchas gracias por el aporte y el vídeo espectacular…

  4. BenjaminJ dice:

    En el pagina web que estoy desarrollando en estos momentos existe un
    salto cuando se hace la acción de scrolldown, es decir, el texto es
    cubierto por el stickymenu. ¿Como podría solucionar ese salto?, ¿Hacer
    un salto mas orgánico?

  5. Pipe dice:

    hola, primero que todo gracias por tus tutoriales, por otra parte hoy se me dio por probar este menú en un móvil y me me di cuenta que no corría algún consejo?

  6. Veronica O. dice:

    Hola que tal, sabes me gustó mucho tu video sin embargo no me gusta como se ve el logo en la parte de arriba, podrías darme un consejo de como agregarlo para que quede a la misma altura del menú y que permanezca fijo con el menu?. De antemano gracias, saludos :)

  7. Daniel dice:

    Hola, gran ejemplo :) una pregunta como puedo centrar los menus ?

  8. Miguel CR dice:

    Hola, excelente menú pero una pregunta que a lo mejor muchos que comenzamos en el mundo de la programación nos preguntamos como puedo agregar sub menus en este mismo menú que creaste, espero me puedas ayudar muy buena pagina saludos :)

  9. juan enrique chavez gonzalez dice:

    Oye Amigo se lo puse a mi menu con animaciones y funciona solo que al menu se le ven los botones arriba como le ago

  10. Jorge_Ch dice:

    Excelente tutorial..!! Lo he seguido paso a paso, pero no me funciona, no se queda pegado el menú, tampoco me indica la distancia que tengo de la parte superior al menú. Estoy utilizando el navegador Chrome Al parecer no me asume el archivo main.js. Quedo atento a su respuesta. Desde ya muchas gracias.-

  11. El Sin Nombre dice:

    Con Jquery se hace ya dinámica la página? Es decir ya no se puede subir a google drive?

  12. Kristian dice:

    Hola, me gustaría saber cómo integrar la caja del buscador a la barra de menú. No encuentro algo que me funcione, llevo tiempo buscándolo :/

  13. Anderson Kanel dice:

    Que tal, como puedo incorporar los «iconos de icomoon» a la barra

  14. Ernesto Cavieres dice:

    Hola, me parecen perfectos tus cursos en verdad estoy fascinado pero tengo una duda, se pueden incluir submenus en el scroll?

  15. Manuel dice:

    Amigo, ese menu pegajoso no funciona bien en google chrome.
    En internet explorer funciona a la perfección.
    Saludos.

  16. osma dice:

    no me funciono. El menu no se queda pegado cuando hago scroll y no se porque.

  17. Danny Leon dice:

    Como le agrego sub-menus :/

  18. Duvan Ardila dice:

    una pregunta de donde sale la variable altura y porque no corre en chrome
    gracias EXCELENTE TUTORIAL

  19. Gabriel Navarro dice:

    Hola, Arturo me podrias ayudar, trato de agregar un logo en la barra de menu pero se sale del cuadro, estoy seguro que lo hago mal pero no se como hacer que para este todo bien. Tambien quisiera que fuera al width 100% siempre (cuando use scroll y al top). Esto es lo q me pasa. El primero es como quisiera q se viera y el segundo es como se ve. Gracias.

  20. teveoenlaweb dice:

    Que buen aporte todo lo que usted hace se entiende a la 100% es muy confiable su fuente le agradezco infinitamente por cada aporte que hace sea complejo o simple son de mucha importancia Muchas gracias y saludos desde colombia!!

  21. Jose Barquero dice:

    Es responsive??

  22. Héctor Pinargote C. dice:

    ¡Muchas gracias Crack!

    Excelente tutorial, muy bien detallado. Me ha sido de gran ayuda.

  23. ‫ادريان دوران ميراندا‬‎ dice:

    ¡¡Ayuda!!

    ¿Como puedo hacer que los elementos queden centrados? & no alineados a la izquierda

    Gracias.

  24. Carlos Sotelo dice:

    Hola, como hago para que la transición al menu-fixed sea mas suave??

  25. Daniel Cardoso dice:

    muito obrigado pela ajuda! meu site ficou com um visual bem melhor agora c:

  26. Will Eduard Gmer dice:

    saludos esta viendo el tutorial, pero me surge una duda con bootstrap como podría logar el menu como este ejemplo?
    http://www.andreagalanti.it/lab/flatfy/

  27. Jesfer dice:

    Hola, ¿cómo se podría hacer el siguiente efecto: http://www.kemtecnia.com? Tiene un sticky menú, pero el slider hace algo diferente.

    Gracias, excelente tutorial.

  28. Adrián Arredondo dice:

    Que buen toturial hermano. !Felicidades! Oye ¿Que software usas para diseñar las páginas web?
    Saludos hermano y gracias por compartir tus tutos.

  29. Muy bueno el artículo :) Gracias por compartirlo!

  30. gavo120 dice:

    hola me gusto mucho solo tengo una duda como puedo anexar submenus ya lo intente agregando la indicacion en el css pero no se

  31. Pandita Azul dice:

    una enorme pregunta, en primera explicare un poco, al principio lo intente y no me quedaba, ahora ya tengo este mismo ejemplo en mi diseño, me queda igual , pero en lugar del menú quiero una imagen, que la imagen se quede fija del mismo modo que el menú ¿como edito el código para que haga lo mismo con una imagen?

  32. Juan Manuel Arroyo dice:

    buenas tardes como hago yo este efecto en joomla en la plantilla gantry

  33. Alonso Núñez dice:

    Tengo un problema ocupo un menú que al darle click al botón este me cargue otra pagina sin salirme de la principal.
    como podría hacer eso?

  34. npereira dice:

    estoy haciendo este menu y uso las grillas con bootstrap para organizar mi contenido lo que sucede es que cuando agrego la clase col-xs y las otras y bajo con el scroll el contenido se superpone con el menu y no se por que

  35. Victor dice:

    Tengo un problema, he intentado hacer el menu pero la parte del javascript no me funciona el adobe dreamweaver me pide que ponga use strict; y cuando lo pongo en la segunda linea ya no me da error pero el menu no se fija de ninguna de las formas

  36. jorge anton dice:

    como se llama este editor de codigo??? lo puedo instalar gratis en linux??

  37. Ricardo Hernandez dice:

    Ya probé todas las opciones, no me queda el sticky, copie todo tu código, probé los diferentes archivos de jquery, baje la versión que tienes de jquery y no me resulto.
    Uso win 7 y estoy programando con Dreamweaver cs6.

  38. Jhoendry Blanco dice:

    con tu ayuda logre colocar una imagen pegajosa, y la coloque a un lado del menu, a simple vista es un efecto bastante bueno ya que yo le coloque flex y al pasarse de la altura la imagen se sale de la caja y las demás crecen ocupando el espacio de la imagen que estaba antes ademas de que la utilizo para volver como ancla colocando un efecto lento también con jquery, eres un grande!

  39. pepe gomez verdugo dice:

    Excelente tutorial..!! Lo he seguido paso a paso, pero no me funciona, no se queda pegado el menú, tampoco me indica la distancia que tengo de la parte superior al menú. Estoy utilizando el navegador Chrome Al parecer no me asume el archivo main.js. Quedo atento a su respuesta. Desde ya muchas gracias. :/

  40. Pedro CM dice:

    Gracias por este artículo! Para artículos como este recomiendo visitar este otro sitio: https://www.cssblog.es

  41. Ventrone Juan dice:

    Hermano eres lo maximo!, no te imaginas cuanto ayudas

  42. Diego Pinzon dice:

    Muchas gracias, funciona perfecto

  43. Dilan Perez dice:

    podrias hacer un tutorial, de como ocultar la barra de redes sociales que tienes en tu pagina porfavor.

Deja una respuesta

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


Aprende con nuestros cursos

React y Firebase: El Curso Completo, Práctico y desde Cero

React y Firebase: Curso Completo, Práctico y desde Cero

En este curso aprenderás React desde lo mas básico y paso por paso hasta un nivel avanzado donde podrás crear sitios y aplicaciones web reales.

Inicia el curso

Diseño Web Profesional El Curso Completo, Practico y desde 0

Bienvenido al Curso de Diseño Web, el curso en el que aprenderás paso por paso y desde cero todo lo que necesitas para convertirte en un diseñador web.

Inicia el curso

Bootstrap 5: El Curso Completo, Práctico y Desde Cero

Aprende Bootstrap 4, el framework de diseño web mas importante del mundo.

Inicia el curso
PHP y MYSQL: El Curso Completo, Practico y Desde Cero

PHP y MYSQL: El Curso Completo, Practico y Desde Cero

Aprende a crear cualquier Aplicacion y Sitio Web!. Aprende PHP y MySQL.

Inicia el curso