滚动离开网页顶部后对 div 进行动画处理

Question

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

我希望使用 animate 来做到这一点，以便它滑出。像这样...

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

但我不能弄清楚如何使红色框留在蓝色框后面，直到用户滚动离开页面顶部。

当用户滚动回到页面顶部时，我还需要反转这一点，因此红色框再次滑回蓝色框下方。

有人可以帮我吗？

Answer 1

这不是最优雅的解决方案，但它仍然有效。

http://jsfiddle.net/37LZ5/

组件：

• 使用 $(document).scroll 作为触发器来了解滚动时
• 使用scrollTop()来知道我们滚动了多远（0=顶部）
• 记住状态以确保动画不会被触发无数次（var远离）
• 使用.stop()来防止动画中途出现奇怪的行为动画，另一个动画被触发

Answer 2

我想您正在寻找这个，看看这个演示

工作演示

代码

$(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/