讓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上滾到原來的位置

回答

相關問題