javascript - 让一个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”。