Make a Div to return to its original position when scrolled up

Question

I have a div with animation when you scrolls down and up, the problem is that when I scroll up and down very fast without letting the div to complete its animation the div little by little gets out of the screen in the upper part.

If I remove the .stop() in the .animate() function and scroll up and down very fast, the div keeps doing this for a while.

I want to keep the animation when scrolled up and down with the only difference that the menu does not get out of the screen when scrolling up and down fast, I have look thorough stack overflow questions like this one but nothing that I found work the code of the jsfiddle can be found here:

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

Why are you using "+=" and "-="? The fact is that when you scroll up without the animation to complete, the current value is taken and '567px' are subtracted from it. I suggest you make it to "567px" and "0px" respectively. You could even try the CSS3 transitions in case you are sure to not target Internet Explorer 9.

Refer an example here: 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;
        };        
});

Edit: Updated example, works with Firefox: http://jsfiddle.net/myTerminal/QLLkL/13/ missed to set "top: 0px" earlier.

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

This should fix it all .

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