Jak zmniejszyć menu nawigacji podczas przewijania w dół?

Question

Dla nowej strony, którą rozwijam, bardzo chciałbym zmniejszyć menu nawigacyjne, gdy użytkownik przewinie w dół.

Coś podobnego do tego, co można zobaczyć na stronie IBM: http://www.ibm.com/us/en/

nie mogłem znaleźć żadnego wdrożenie jQuery lub wychowawczy wokół (jestem pewien, że musi być poszukiwanie niewłaściwych słów kluczowych)

Więc jeśli ktoś może wskazać mi w dobrym kierunku, że sprawi, że będę naprawdę szczęśliwy.

Z góry dzięki!

Answer 1

Tutaj można przejść człowiek:

$(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); 
    } 
    }); 
}); 

Demo: http://jsfiddle.net/seancannon/npdqa9ua/

Answer 2

Co należy zrobić, to sprawdzić wartość przewijania okna. Jeśli jest większa niż zero, użytkownik przewinął w dół. Jeśli tak, ukryj baner (lub skurcz lub cokolwiek). Jeśli wrócą do początku, a następnie powtórz to.

http://jsfiddle.net/rxXkE/

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

});

Answer 3

ta kurczy się i rośnie paska nawigacji jako użytkownik przewija. Utworzono ten pasek nawigacji z poziomu http://www.kriesi.at/themes/enfold/. Wersja stworzona przeze mnie działa prawie tak samo. https://github.com/Jlshulman/Elastic-Bar