CODEWITHSUNDEEP
javascriptjqueryjquery-ui
user2879138
user2879138

Reputation: 51

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

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

Upvotes: 5

Views: 280

Answers (3)

ProllyGeek
ProllyGeek

Reputation: 15846

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 .

Upvotes: 3

anuj baliyan
anuj baliyan

Reputation: 11

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

Upvotes: 1

myTerminal
myTerminal

Reputation: 1646

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.

Upvotes: 3

Related Questions