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

当您向下和向上滚动时，我有一个带动画的 div，问题是，当我非常快地向上和向下滚动而不让 div 完成其动画时，div 会逐渐从上部屏幕中消失。

如果我删除 .animate() 函数中的 .stop() 并快速上下滚动，div 会继续执行此操作一段时间。

我想在上下滚动时保留动画，唯一的区别是快速上下滚动时菜单不会离开屏幕，我已经仔细查看了像这样的堆栈溢出问题，但我发现没有任何代码可以工作jsfiddle 的可以在这里找到：

http://jsfiddle.net/QLLkL/4/ 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;
    };        
});

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

请参阅此处的示例：http://jsfiddle.net/myTerminal/QLLkL/6/ 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/ http://jsfiddle.net/myTerminal/QLLkL/13/错过了之前设置“top: 0px”。