javascript - 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

一种方法是跟踪 slider 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);
        }        
    }
});