Powoduje, że element Div powraca do pierwotnej pozycji po przewinięciu do góry

Question

Mam div z animacją, gdy przewijasz w dół iw górę, problem polega na tym, że gdy przewijam w górę iw dół bardzo szybko, nie pozwalając div na dokończenie animacji, div krok po kroku wychodzi z ekranu w górnej części.

Jeśli usunę .stop() w funkcji .animate() i przewijam w górę iw dół bardzo szybko, div kontynuuje to przez chwilę.

Chcę zachować animację podczas przewijania w górę iw dół z tą tylko różnicą, że menu nie wychodzi z ekranu podczas szybkiego przewijania w górę iw dół, Mam dokładnie takie pytania, jak ten, ale nic, znaleziono praca kod z jsfiddle można znaleźć tutaj:

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

Dlaczego używasz "+ =" i "- ="? Faktem jest, że po przewinięciu w górę bez animacji do końca, bieżąca wartość jest pobierana, a od niej odejmuje się "567px". Proponuję, abyś zrobił to odpowiednio "567px" i "0px". Można nawet spróbować przejścia CSS3 w przypadku na pewno nie kierować Internet Explorer 9.

Patrz przykład tutaj: 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; 
     };   
}); 

Edycja: Zaktualizowany przykład, działa z Firefoksem: http://jsfiddle.net/myTerminal/QLLkL/13/ brakowało, aby ustawić "top: 0px" wcześniej.

Answer 2

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

Powinno to wszystko naprawić.

Answer 3

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