Cómo reducir el menú de navegación cuando se desplaza hacia abajo?

Question

Para un nuevo sitio que estoy desarrollando me encantaría reducir el menú de navegación cuando el usuario se desplaza hacia abajo.

Algo similar a lo que se puede ver en el sitio de IBM: http://www.ibm.com/us/en/

no pude encontrar ninguna aplicación jQuery o tutorial alrededor (estoy seguro de que debo estar buscando las palabras claves incorrectas)

Así que si alguien puede señalarme en la dirección correcta, me hará muy feliz.

¡Gracias de antemano!

Answer 1

Aquí tiene el hombre:

$(function(){ 
    var navStatesInPixelHeight = [40,100]; 

    var changeNavState = function(nav, newStateIndex) { 
    nav.data('state', newStateIndex).stop().animate({ 
     height : navStatesInPixelHeight[newStateIndex] + 'px' 
    }, 600);  
    }; 

    var boolToStateIndex = function(bool) { 
    return bool * 1;  
    }; 

    var maybeChangeNavState = function(nav, condState) { 
    var navState = nav.data('state'); 
    if (navState === condState) { 
     changeNavState(nav, boolToStateIndex(!navState)); 
    } 
    }; 

    $('#header_nav').data('state', 1); 

    $(window).scroll(function(){ 
    var $nav = $('#header_nav'); 

    if ($(document).scrollTop() > 0) { 
     maybeChangeNavState($nav, 1); 
    } else { 
     maybeChangeNavState($nav, 0); 
    } 
    }); 
}); 

Demostración: http://jsfiddle.net/seancannon/npdqa9ua/

Answer 2

Lo que debe hacer es verificar el valor de desplazamiento de la ventana. Si es mayor que cero, el usuario se desplazó hacia abajo. Si es así, oculte el titular (o reduzca o lo que sea). Si vuelven a la parte superior, vuelve a mostrarlo.

http://jsfiddle.net/rxXkE/

$(window).scroll(function() { 
console.log($(window).scrollTop()); 
if ($(window).scrollTop() > 0) { 
    $(".banner").slideUp(); 
} 
else { 
    $(".banner").slideDown(); 
} 

});

Answer 3

Esto se contrae y crece la barra de navegación que el usuario se desplaza. Creado esto fuera de la barra de navegación http://www.kriesi.at/themes/enfold/. La versión que creé funciona casi igual. https://github.com/Jlshulman/Elastic-Bar