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