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

myTerminal · Accepted Answer · 2013-12-10 05:02:30Z

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.

Updated version here, works with Firefox: jsfiddle.net/myTerminal/QLLkL/13
ok. can you update your answer. so that other users can follow the same. :)

Surya Narayan · Accepted Answer · 2013-12-10 05:34:13Z

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 .

Neeku · Accepted Answer · 2013-12-10 05:20:54Z

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

Collectives™ on Stack Overflow

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

3 Answers 3

4 Comments

1 Comment

Comments

Linked

Hot Network Questions