jQuery-將div滑入屏幕

Question

當用戶滾動到頁面上的特定點時，我嘗試將div滑入屏幕。

我不想使用scrollDown / scrollUp，因為它在顯示時“繪制”。

我需要整個div已經填充到屏幕之外然后滑入屏幕的東西。

我正在尋找與此類似的東西： http : //www.invisionapp.com/?utm_source=LandBook2&utm_medium=banner&utm_campaign=Product

我嘗試使用.animate，但是響應時間非常延遲（例如1分鍾以上）

我的代碼：

jQuery的：

$(window).scroll(function() {
    if ($(document).scrollTop() > 725) {

        $('#topHeaderColor').animate({top: 0}, 500);
    }
    else {
        $('#topHeaderColor').animate({top: -150}, 500);
    }
});

HTML：

     <div id="topHeaderColor">
     // Images and other Divs here
     </div>

CSS：

 #topHeaderColor {
     left: 0;
     position: fixed;
     width: 100%;
     z-index: 5;
     background-color: green;
     top: -150px;
     height: 150px;
 }

Answer 1

一種方法是跟蹤滑塊div是否顯示：

http://jsfiddle.net/27jsqzbm/

var showingSlider = false;

$(window).scroll(function() {
    if ($(document).scrollTop() > 725) {
        if (!showingSlider){
            showingSlider=true;
            $('#topHeaderColor').animate({top: 0}, 500);
        }
    }
    else {
        if (showingSlider){
            showingSlider=false;
            $('#topHeaderColor').animate({top: -150}, 500);
        }        
    }
});