Kadar kaydırıldığında orijinal konumuna geri dönmek için bir Div yapın

Question

Aşağı ve yukarı kaydırdığınızda, animasyonlu bir div var, sorun, div'in animasyonunu tamamlamasına izin vermeden çok hızlı bir şekilde yukarı ve aşağı kaydırdığımda Üst kısımdaki küçük ekranlar ekranın dışına çıkar.

.anal() işlevindeki .stop() öğesini kaldırır ve çok hızlı bir şekilde yukarı ve aşağı kaydırırsanız, div bunu bir süredir devam ettirir.

Hızlı ve yukarı kaydırırken ekranın menüden çıkmaması arasındaki tek farkla yukarı ve aşağı kaydırıldığında animasyonu devam ettirmek istiyorum. eser bulundu jsfiddle kodu burada bulunabilir:

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

Neden "+ =" ve kullandığınız "- ="? Gerçek şu ki, tamamlamak için animasyon olmadan yukarı kaydırdığınızda, mevcut değer alınır ve '567px' ondan çıkarılır. Sırasıyla "567px" ve "0px" yapmasını öneririm. Hatta Internet Explorer 9'u

Burada bir örnek bakın hedeflemeyen eminiz durumda CSS3 geçişleri deneyebilirsiniz: 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; 
     };   
}); 

Düzenleme: Güncelleme örneği, Firefox ile çalışır: http://jsfiddle.net/myTerminal/QLLkL/13/ ayarlamak için cevapsız "top: 0px" daha önce.

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

Bu hepsini düzeltmek gerekir.

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