Aşağı kaydırırken gezinme menüsü nasıl küçültülür?

Question

Gelişmekte olduğum yeni bir site için kullanıcı aşağı doğru kaydırıldığında gezinme menüsünü daraltmayı çok isterim. IBM yerinde görebileceğiniz ne benzer

şey: http://www.ibm.com/us/en/

herhangi jQuery uygulaması bulmak veya etrafında öğretici olamazdı

Yani eğer (ben yanlış anahtar kelimeleri arıyor olmalı eminim) Birisi beni doğru yönde gösterebilir, beni gerçekten mutlu eder.

Şimdiden teşekkürler!

Answer 1

gittiğiniz adam:

$(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/ Bu küçülür ve kullanıcı kaydırma gezinti çubuğu büyür

Answer 2

Yaptığınız şey pencerenin kaydırma değerini kontrol etmektir. Sıfırdan büyükse, kullanıcı aşağı kaydırılmış. Öyleyse, afişi gizleyin (veya küçültün ya da her neyse). En tepeye geri dönüp tekrar gösterseler.

http://jsfiddle.net/rxXkE/

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

}); İşte

Answer 3

. Bunu http://www.kriesi.at/themes/enfold/ gezinme çubuğunda oluşturdu. Oluşturduğum sürüm neredeyse aynı şekilde çalışıyor. https://github.com/Jlshulman/Elastic-Bar