向上滚动时使Div返回其原始位置

Question

当你向下和向上滚动时,我有一个带动画的div,问题是当我快速上下滚动而不让div完成动画时,div一点一点地从上半部分的屏幕中移出.

如果我删除.animate()函数中的.stop()并快速向上和向下滚动,div会暂时执行此操作.

我想在上下滚动时保持动画,唯一的区别就是当快速上下滚动时菜单没有离开屏幕,我看起来像这样一个彻底的堆栈溢出问题,但我找不到任何工作代码可以在这里找到jsfiddle:

http://jsfiddle.net/QLLkL/4/

$(window).scroll(function(){
    if($(window).scrollTop() > 480 && !animationStarted){
         $("#menu").stop().animate({ "top": "+=180px" }, 1000);
        animationStarted  = true;
    };
    if($(window).scrollTop() < 480 && animationStarted){
         $("#menu").stop().animate({ "top": "-=180px" }, 1000);          
        animationStarted  = false;
    };        
});

Answer 1

为什么使用“+=”和“-=”？事实是，当您向上滚动而动画未完成时，将采用当前值并从中减去“567px”。我建议你分别将其设置为“567px”和“0px”。如果您确定不以 Internet Explorer 9 为目标，您甚至可以尝试 CSS3 转换。

请参阅此处的示例：http://jsfiddle.net/myTerminal/QLLkL/6/

$(window).scroll(function(){
        if($(window).scrollTop() > 480 && !animationStarted){
             $("#menu").addClass("bottom");
            animationStarted  = true;
        };
        if($(window).scrollTop() < 480 && animationStarted){
             $("#menu").removeClass("bottom");
            animationStarted  = false;
        };        
});

编辑：更新的示例，适用于 Firefox： http: //jsfiddle.net/myTerminal/QLLkL/13/错过了之前设置“top: 0px”。