Quiero que mi barra de navegación solo se muestre después de desplazarse. Lo he hecho con JS pero hay un "paso" cuando se desliza hacia arriba o hacia abajo. Aquí está el código JS:

$(document).ready(function(){
    // hide .navbar first
    $(".navbar").hide();

    // fade in .navbar
    $(function () {
        $(window).scroll(function(){
        // set distance user needs to scroll before we fadeIn navbar
            if ($(this).scrollTop() > 100) {
                $('.navbar').slideDown(2000);
            } 
            else {
                $('.navbar').slideUp(2000);
            }
        });
    });
});

Y el JSfiddle: http://jsfiddle.net/3dcg2ygw/

¿Cómo puedo conseguirlo sin problemas?

0
Laurent B. 3 sep. 2014 a las 13:00

2 respuestas

La mejor respuesta

El problema es que la barra de navegación tiene una altura mínima, intente esto en su código:

.navbar {
    height: 97px;
    background-color: #fff;
    overflow:hidden;
    min-height:0px;
}

Demo

0
Ruben R Aparicio 3 sep. 2014 a las 09:36

Usaría un fundido en la función jQuery

$(document).ready(function () {

    // hide .navbar first
    $(".navbar").hide();

    // fade in .navbar
    $(function () {
        $(window).scroll(function () {
            // set distance user needs to scroll before we fadeIn navbar
            if ($(this).scrollTop() > 100) {
                $('.navbar').fadeIn().slideDown();
            } else {
                $('.navbar').fadeOut().slideUp();
            }
        });
    });
});
0
Matthew A Thomas 3 sep. 2014 a las 09:05