从网页顶部滚动后为 div 设置动画答案

【问题标题】：Animate a div after scrolling away from the top of the webpage从网页顶部滚动后为 div 设置动画
【发布时间】：2012-01-04 21:25:06
【问题描述】：

我目前正在尝试在用户滚动离开页面顶部后让一个 div 从另一个 div 后面显示。

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

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

但我不知道如何让红色框留在蓝色框后面，直到用户滚动离开页面顶部。

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

谁能帮帮我？

【问题讨论】：

标签： javascript jquery css animation scroll

【解决方案1】：

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

http://jsfiddle.net/37LZ5/

组件：

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

【讨论】：

完美运行，谢谢！我很好奇，scrollTop() 是以像素为单位的吗？因此，例如，如果我将其更改为 200 而不是 0，那么动画将在用户向下滚动页面 200 像素后开始？
是的，scrolltop 以像素为单位：api.jquery.com/scrollTop：“垂直滚动位置与可滚动区域上方隐藏的像素数相同。”

【解决方案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);
    });
});

【讨论】：

【解决方案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/

【讨论】：

【解决方案4】：

如果我正确理解了您的问题，我对 jsFiddle 做了一些事情，这可能就是您所追求的。

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

不是 100%，只是快速模拟一下，看看这是否是您想要的。（滚动时，单击滚动条箭头以获得更准确的结果）

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

【讨论】：