Run/load javascript when div is appears or reaches top of page?

Run/load javascript when div is appears or reaches top of page?

Completely new to this... and really appreciate your help! Not amazing at
coding either! But here goes...
Found this code I wanted to develop further:
$('.bar-percentage[data-percentage]').each(function () { var progress =
$(this); var percentage = Math.ceil($(this).attr('data-percentage'));
$({countNum: 0}).animate({countNum: percentage}, { duration: 2000,
easing:'linear', step: function() { // What todo on every count var pct =
Math.floor(this.countNum) + '%'; progress.text(pct) &&
progress.siblings().children().css('width',pct); } }); });
What I would like is the code to start the function when the DIV reaches
the top of the page when scrolling.
Or more preferable, when the DIV appears... a 2 second delay before the
animations start.
Many thanks in advance. This is highly appreciated. I got the original
code from here http://cssdeck.com/labs/percentage-bar