从网页顶部滚动离开后为网格制作动画

Question

我目前正试图在用户从页面顶部滚动之后使div从另一个div后面出现。

我希望能使用动画效果使它滑出。像这样...

http://jsfiddle.net/xaYTt/99/

但我无法弄清楚如何使红框留下蓝色的框，直到从页面顶部的用户滚动了。

我还需要在用户滚动回页面顶部时反转此操作，以便红框再次滑入蓝框下方。

任何人都可以帮我吗？

Answer 1

这还不是最完美的解决方案，但它仍然工作。

http://jsfiddle.net/37LZ5/

组件：

• 使用的$（document）.scroll作为触发滚动
• 使用scrollTop的（）知道我们有多远滚动时就知道（0 =顶部）
• 记住状态以确保动画不会被触发数十亿次（var away）
• 使用.stop（）可防止在通过一个动画中途时发生的奇怪行为，另一个动画被触发

Answer 2

我认为你正在寻找这个看看这个演示

Working demo

代码

$(document).ready(function(){ 
    //$('#bottom-box').animate({'margin-top': '200px'}, 1500); 
    $('body').hover(function(){ 
     $('#bottom-box').animate({'margin-top': '200px'}, 1500); 
    }, function(){ 
     $('#bottom-box').animate({'margin-top': '50px'}, 1500); 
    }); 
}); 

Answer 3

如果我对你的问题的理解是正确的，这是你是什么寻找

既然你说过，“用户从页面顶部滚动”，我补充说一个div位于页面的顶部。

var isAlreadyOut=false; 
$("#divPageTop").mouseover(function(){ 
if(isAlreadyOut==true) 
{ 
    $('#bottom-box').animate({'margin-top': '60px'}, 1500); 
    isAlreadyOut=false; 
} 
else 
{ 
    $('#bottom-box').animate({'margin-top': '200px'}, 1500); 
    isAlreadyOut=true;      
} 
}); 

这里是的jsfiddle版本 http://jsfiddle.net/xaYTt/103/

Answer 4

我做了一件具有的jsfiddle这可能是你所追求的，如果我理解正确你的问题。

基本上，当您滚动窗口的距离超过蓝色框的距离时，红色框会生成动画。

不是100％，只是一个快速模拟，看看这是你想要的。 （滚动时，点击滚动条箭头的更精确的结果）

演示在这里：http://jsfiddle.net/peduarte/xaYTt/104/