Question

我有一个div，当用户滚动到页面上的特定点时，我试图滑入屏幕。

我不想使用scrollDown / scrollUp，因为它＆＃34; draw＆＃34;因为看起来。

我需要一些东西，其中整个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);
        }        
    }
});

jQuery - 将div滑入屏幕

1 个答案: