让Div上滚到原来的位置

当滚动向上滚动时，我有一个带有动画的div，问题是当我上下快速滚动而没有让div完成其动画时，div一点一点地出现在屏幕上方。让Div上滚到原来的位置

如果我删除.animate（）函数中的.stop（）并快速向上和向下滚动，div会一直执行此操作。

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

$(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; 
    };   
});

来源

2013-12-10 user2879138

你为什么要使用 “+ =” 和 “ - =”？事实是，当您向上滚动而没有完成动画时，将采用当前值并从中减去'567px'。我建议你分别将其设置为“567px”和“0px”。你甚至可以尝试在情况下，CSS3过渡您一定不会针对Internet Explorer的9

这里指的一个例子：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”之前。

来源

2013-12-10 04:42:01 myTerminal

你用firefox测试过吗？ – SpiderCode

此处更新的版本，适用于Firefox：http://jsfiddle.net/myTerminal/QLLkL/13/ – myTerminal

好的。你能更新你的答案吗？以便其他用户可以遵循相同的步骤。 :) – SpiderCode

http://jsfiddle.net/prollygeek/QLLkL/14/

$(document).ready(function(){ 
    var animationStarted = false; 
    var x=$("#menu").css("top") 
    $(window).scroll(function(){  
     if($(window).scrollTop()>x) 
     { 
      $("#menu").stop().animate({ "top": x+"px" }, 20); 
     } 
     else 
     { 
      $("#menu").stop().animate({ "top": $(window).scrollTop()+"px" }, 20); 
     } 
     // animationStarted = true;    
    }); 
});

这应该可以解决这一切。

来源

2013-12-10 04:54:06 ProllyGeek

仍然需要一些修复 – ProllyGeek

$(document).ready(function(){ 
    var animationStarted = false; 

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

来源

2013-12-10 05:00:35

让Div上滚到原来的位置

回答

相关问题