Start animating when the div reaches a certain distance from the top of the page

Question

I have a menu that floats in a window when scrolling. Currently, my menu always remains at 190px at the top of the window. I am using a dimension plugin and here is my jQuery:

$(document).ready(function() { menuYloc = parseInt($('#mainMenu').css('top').substring(0,$('#mainMenu').css('top').indexOf('px'))) $(window).scroll(function () { var offset = menuYloc+$(document).scrollTop()+'px'; $('#mainMenu').animate({top:offset},{duration:600,queue:false}); }); }); 

What I would like to do is that when you scroll to the top of the page, the menu is 190 pixels from the top. However, when you start scrolling through the menu, the page scrolls until it reaches 50 pixels at the top of the window, then it starts to float, always staying 50 pixels from the top of the window, unless you scroll back to the top of the window .

Hope this makes sense and please let me know if you have a solution.

Answer 1

Ok, thanks @twsansbury and @andy. Looks like I figured it out with your nudges in the right direction.

Here is what I ended up with:

 var minDistance = 50; var startDistance = 190; $(window).scroll(function() { var scrollTop = $(document).scrollTop(); var newDistance = (scrollTop + minDistance); if (scrollTop > startDistance - minDistance) { $('#mainMenu').animate({top:newDistance},{duration:600,queue:false}); } else { $('#mainMenu').animate({top:startDistance},{duration:600,queue:false}); } }); 

And here is the jsfiddle, which shows a comparison between the three solutions: http://jsfiddle.net/cpL69/

Thanks again for the help :)

Answer 2

 var minDistance = 50; var startDistance = 190; $(window).scroll(function() { var scrollTop = $(document).scrollTop(); if (scrollTop > startDistance - minDistance) { $('#mainMenu').css('top', scrollTop + minDistance); } else { $('#mainMenu').css('top', startDistance); } }); 

Violin:
http://jsfiddle.net/d52wr/

Answer 3

One approach is to change the position and top attribute based on the scroll distance. This approach allows the browser to handle the display during the render cycle while scrolling, which leads to smoother transitions compared to the top approach, since flickering artifacts may occur due to event handling.

 var minDistance = 50; var startDistance = 190; $(window).scroll(function() { var scrollTop = $(document).scrollTop(); if (scrollTop > startDistance - minDistance) { $('#mainMenu2').css({position: 'fixed', top: minDistance}); } else { $('#mainMenu2').css({position: 'absolute', top: startDistance}); } }); 

Here is a jsfiddle showing a side-by-side comparison between the two approaches: http://jsfiddle.net/nKAtB/ . In some browsers, when scrolling fast or long distances, you can observe a flickering effect when the div is placed after each scroll event.

Answer 4

 $(window).scroll(function() { $('#animatedElement').each(function(){ var imagePos = $(this).offset().top; var topOfWindow = $(window).scrollTop(); if (imagePos < topOfWindow+400) { $(this).addClass("slideUp"); } }); }); 

Replace #animatedElement with the identifier or class of the element you want to animate. Replace slideUp with the animation class. 400 represents the space between the item and the top of the screen. Animation is activated when an element is 400 pixels from the top of the screen. Increase this number to activate the animation earlier.