Fare un Div per tornare alla posizione originale quando si scorre su

Question

Ho un div con animazione quando scorri verso il basso e verso l'alto, il problema è che quando scorro su e giù molto velocemente senza lasciare che il div completi la sua animazione il div a poco a poco esce dallo schermo nella parte superiore.

Se rimuovo il .stop() nella funzione .animate() e scorro su e giù molto velocemente, il div continua a farlo per un po '.

Voglio mantenere l'animazione quando scorri verso l'alto e verso il basso con l'unica differenza che il menu non esce dallo schermo quando scorri rapidamente verso l'alto e verso il basso, ho cercato domande di overflow dello stack complete come questa ma niente trovato lavoro il codice del jsfiddle può essere trovato qui:

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

perché stai usando "+ =" e "- ="? Il fatto è che quando si scorre verso l'alto senza l'animazione per completare, viene preso il valore corrente e "567px" viene sottratto da esso. Ti suggerisco di farlo rispettivamente su "567px" e "0px". Si potrebbe anche provare le transizioni CSS3 nel caso in cui si è sicuri di non indirizzare Internet Explorer 9.

consultare un esempio qui: 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; 
     };   
}); 

Modifica: Aggiornato esempio, funziona con Firefox: http://jsfiddle.net/myTerminal/QLLkL/13/ perdere per impostare "top: 0px" in precedenza.

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

Questo dovrebbe risolvere tutto.

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