在向上滾動時使用animate（）並顯示div

Question

我的網站上有兩個導航。 兩個導航欄都是固定的。 基本上當我向上滾動時，我想使用animate（）並在頁面中顯示兩個導航欄。 如何獲取向上滾動事件並使用它來設置div的動畫，例如Google搜索小部件。 我將衷心感謝您的幫助。 謝謝。

HTML：

    <div id="navbar_header">
        <a href="#">some link</a>
    </div>
    <div id="main_content">
        <p>Some content...</p>
    </div>
    <div id="navbar_footer">
        <a href="#">some link</a>
    </div>

CSS：

#navbar_header {
    background: #22313F;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 40px;
}

#navbar_footer {
    background: #22313F;
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 40px;
}

Answer 1

通常使用滾動事件的窗口應該足夠了，因為它足夠大並且正在滾動的一個元素。 如果正確加載了jQuery，你可以嘗試這樣的事情：

$(document).ready(function(){
    var lastTopPosition = 0;
    $(window).scroll(function(){
        var topPosition = $(window).scrollTop();
        if (topPosition > lastTopPosition ){
            $("#navbar_header").stop(true).animate({'top':'-40px'}, 200);
            $("#navbar_footer").stop(true).animate({'bottom':'-40px'}, 200);
        } else {
            $("#navbar_header").stop(true).animate({'top':'0px'}, 200);
            $("#navbar_footer").stop(true).animate({'bottom':'0px'}, 200);
        }
        lastTopPosition = topPosition;
    }
});

每次滾動時，這段代碼都會從頂部獲取當前位置。 如果距離變大（向下滾動），則兩個條形淡出。 如果它變得越來越小（向上滾動）它就會淡入。你可以在這里用你的animate（）調用替換FadeOut / In方法。 檢查，如果元素顯示在這里也會很好，但我想你可以想出那一個;-)

Answer 2

如果我理解這一點，那就是：

$("#main_content").scroll(function(){
     $('#navbar_header').show(300); 
     $('#navbar_footer').show(300); 
});

show（300）將基本上顯示你的div的動畫300ms。