D4mations.com

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



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;

Como hacer un menú de navegacion pegajoso (Sticky menu)

—
Redes Sociales:

♦ Twitter @falconmasters:

♦ Pagina de Facebook:
http://www.falconmasters.com

♦ Curso patrocinado por okhosting:

index



Original source

d4mer

, , , , , , , , , , , , , , ,

36 responses to “Como hacer un menú pegajoso / sticky menu con HTML, CSS y Javascript”

  1. 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

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

  13. 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.

  14. 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.

  23. 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
    }

  26. 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

Leave a Reply