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/

滚动远离网页顶部后为div设置动画

4 个答案: