Animate a div with jquery when we scroll to its position

Question

I am need of a jquery functionality through which when user is scrolling the page and a certain div comes in visible portion/middle of the screen some action happens. For example: Verelo.com. If you scroll down you will see a glob with two icons along with and an jquery animation with black arrows. I need similar functionality. I don't expect exact but at least something to be nearest.

For my efforts, I found this example : Verelo.com and did some googling. But didn't find anything yet.

Please help.

Answer 1

They listen to the document's scroll event, and calculate the document's scrollTop compared to the element's position.

Basically, the parameters you'll need to consider in order to calculate whether or not an element is in viewport (taking only Y-axis scroll into consideration), is the document's scroll position, the height of the viewport, the position of the target element, and the height of the target element.

$(window).scroll(function() {

   var scrollTop = $(document).scrollTop();
   var viewportHeight = $(window).height();

   var targetPosition = $('#target').position().top;
   var targetHeight = $('#target').outerHeight();

   // viewport stretches from scrollTop to (scrollTop + viewportHeight)

});

You'll also need to figure out if .position().top or .offset().top is most suitable for you, depending on how the element is positioned, and on what it is that is being scrolled.

Demo