En este video tutorial aprenderemos como hacer una barra de navegacion pegajosa (sticky menú) que se pega a la parte superior del navegador al scrollear.
♦ Blog de diseño web:
http://www.falconmasters.com
♦ Necesitas ayuda con el tutorial? Únete a nuestra comunidad:
http://www.heroesdelaweb.com
—
♦ Tutorial escrito, recursos y códigos;
—
Redes Sociales:
♦ Twitter @falconmasters:
Tweets by FalconMasters
♦ Pagina de Facebook:
http://www.falconmasters.com
♦ Curso patrocinado por okhosting:
36 responses to “Como hacer un menú pegajoso / sticky menu con HTML, CSS y Javascript”
FALCON MUY BIEN ENSEÑADO .. tengo un problemita al momento de hacer scroll se aumenta el tamaño y tbm se mueve uno poco a la izquierda de la pagina buen .. como podría resolver eso gracias
Gracias bro me sirvió mucho,pero mi duda es como poner un fondo de pantalla ahí mismo se supone es en el body y background pero no me lo muestra en la pagina
Hola buenas tardes, use tu codigo del menu para una pagina que estoy desarrollando para uso personal, cuando subo todos los archivos a un hosting gratuito (260mb) el menu sticky no funciona, podrias auxiliarme?? Saludos y tus tutoriales son un exito!!!! Saludos!
hise otro igual y tampoco me funciona.
amigo una consulta, no me sale. de otra forma. no se sosopecho que hise con inline block. tu hace de otra forma el nav bar para que se quede horisontal. porque?
Madre mía muchacho, tienes los mejores tutoriales! Lo explicas súper bien, sin redundancia, sin dejarte nada… Perfecto, me sirve siempre!
Una pregunta. Como puedo hacer para que al hacer scroll se aplique opacidad??
Como me puedo registrar a Heroes de la Web. no puedo con mi facebook y no hay un link de registro
¿Sirve para moviles?
hola amigo puedes facilitar el codigo
Hola Carlos Arturo, son geniales tus videos! gracias. (Creo que he aprendido muchisimo gracias a vos)
Por otro lado, te comento que hice los menu "pegajoso" y "menu con desplegable" los dos en uno, siguiendo ambos videos… pero me surgio un problema, cuando no hago scroll funciona el desplegable , cuando hago scroll el desplegable no aparece…
QUE PUEDE SER?
Este es mi css:
/*/// MENU NAV ///*/
nav {
margin-bottom:10px;
background: #6d3f3f
}
nav {
list-style: none;
overflow: hidden;
}
nav li {
float: left;
opacity: none;
margin-left: 12%;
}
nav li a {
display: block;
padding:15px;
color:#fff;
text-decoration: none;
background-color: #6d3f3f;
}
nav li a:hover {
background-color:firebrick;
}
nav li ul {
display:none;
position: absolute;
min-width: 140px;
}
nav li:hover > ul {
display: block;
}
.menu-fixed {
position:fixed;
z-index:1000;
top:0;
max-width:100%;
left:0px;
right: 0px;
width:100%;
box-shadow:0px 4px 3px rgba(0,0,0,.5);
opacity: .8;
}
.menu-fixed > nav li:hover > ul {
display: block;
}
.anti-salto{
margin-top:70px;
}
Y este es mi js:
$(document).ready(function(){
var altura = $('.menu').offset().top;
$(window).on('scroll', function(){
if ( $(window).scrollTop() > altura ){
$('.menu').addClass('menu-fixed');
$('.contenedor-texto').addClass('anti-salto');
} else {
$('.menu').removeClass('menu-fixed');
$('.contenedor-texto').removeClass('anti-salto');
}
});
});
muchas gracias!!
Hola que tal, muy interesante tu vídeo tengo una pregunta… q relativamente no es con respecto a este vídeo. Porque ya he visto casi la mayoría de tus videos y no encuentro respuesta a mi duda.
Necesito indicar que un elemento del menú ha sido seleccionado es decir que le dimos un click..cambiando el color de fondo de ese elemento <li> , como podría hacerlo con jquery, muchas gracias.
Hola Carlos, realiza el menú de Twitter, es parecido a este pero con una diferencia, de que cuando uno baja en el contenido, el logo del usuario desaparece y a su vez solo queda el nombre del usuario, sin el logo. Mil felicitaciones, siempre te sigo. LIKE.
estupendo, muchas gracias por el video
hola Buenas Tardes necesito ayuda para ver como puedo hacer que mi menu se expanda como aparece en tu video? es que solo se queda como centrado en html???
Tus videos han sido de gran ayuda.
Mil gracias.
hola FalconMaster recomiendame un libro para aprender como tu lo haz hecho!!!!
Se puede usar con bootstrap? navbar
Hola, soy de Perú. Una pregunta, como se llama ese programa que utilizas para escribir código.? el de.este vídeo ? saludos.
increible que estos videos sean gratis
Hola esta configuración me sirve para WordPress?
Tengo una consulta: el menú funciona como corresponde, se pega al momento de hacer scroll, mi único tema es el siguiente:
Decidí hacer el menú al principio transparente, ya que en el fondo del header hay una imagen que abarca todo el contenedor. También dije, al momento de hacer scrolldown, el navmenu se pega al top y de fondo adquiere un color blanco con el color del texto de los botones negro. El problema que se me genera es que el texto no toma el color negro y queda en blanco. Adjunto imagen a modo de ilustración:
https://i.imgsafe.org/217e96380b.png
LA LINEA CELESTE ES A MODO DE MOSTRAR EL FIN DE UNA IMAGEN Y COMIENZO DE LA OTRA.
fragmento del codigo:
HTML:
<header>
<div class="contenedorheader">
<div class="logo">
<img src="img/logo.png" alt="GotaGota Sistema de Riego automatico">
</div>
<nav class="navmenu">
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Nosotros</a></li>
<li><a href="#">Productos</a></li>
<li><a href="#">Proyectos</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
</div>
</header>
CSS:
header div.contenedorheader nav ul li a{
display: inline-block;
margin-top: 5px;
padding: 10px 22px;
color: white; <— creo que el error surge con que se queda con este valor.
text-decoration: none;
font-weight: 500;
font-size: 15px;
}
header .navmenu {
width: 100%;
height: 80px;
position:fixed;
z-index: 999;
}
.menu-fixed {
position: fixed;
z-index: 999;
background-color: #fff;
top: 0;
width: 100%;
box-shadow: 0px 4px 3px rgba(0,0,0,0.3);
}
.menu-fixed ul li a {
padding:13px 20px;
text-decoration: none;
<– aqui debajo intente agregando un color: #000; pero no me lo toma, creo que es por que se queda con el valor de arriba
}
gracias me ayudo bastante tome su like buen hombre 😀
Java script es muy complicado ;:(
Para los que no quieren que el elemento inferior al menú (contenedor de texto) no de un salto hacia arriba al momento de bajar deben crear una clase que agregue el alto del menú al ese elemento al hacer scroll, se tiene que agregar en el mismo código jQuery, asi:
En el CSS:
.anti-salto{
margin-top: 70px; /mismo height que el menú/
}
En el script:
if ( $(window).scrollTop() > altura ){
$('.menu').addClass('menu-fixed');
$('.contenedor-texto').addClass('anti-salto');
} else {
$('.menu').removeClass('menu-fixed');
$('.contenedor-texto').removeClass('anti-salto');
}
Aqui el ejemplo: https://jsfiddle.net/1t7nahmv/1/
Para saber el alto del menú pueden usar el metodo .height(); de jQuery
no me funciona el menu a cuando lo bajo …
le moviste algo mas .. o lo debo de meter en una carpeta especifica para que me salga ?
Hola FalconMaster, tendrás tutoriales de como aprender Java Script?
Muy buen video; explicas muy bien! Video de gran ayuda!
hola podrias ayudarme con un bug?
hola, a mi no me funciona lo del menu, cuando bajo el desaparece
No me aparece la altura, y puse el codigo bien, que puede ser?
sacando todo lo bueno que es tu video, no es haiga es haya, del verbo haber…
Interesante, pero sabes como hacer el Js sin Jquery? Con Javascript puro.
haya inculto que no as cojido un diccionario en tu puta vida
que programa usas?