Take the 2-minute tour ×

im trying to fire a function when a div reaches a certain level in the scroll.

Could someone help me out with this?

Code / fiddle:


share|improve this question
And the problem is? Stack Overflow is not rentacoder, y'know.. –  Lightness Races in Orbit Jul 28 '11 at 14:22
That's right, at Stack Overflow coders work for free. –  hughes Jul 28 '11 at 14:28

5 Answers 5

up vote 1 down vote accepted


looks like about the same answer as Nicola

share|improve this answer
Thanks for this! Although im having a few issues implementing it... Basically it is firing the event straight away as soon as scroll is touched –  jimmy Aug 1 '11 at 14:40
@jimmy It's not supposed to? –  Joseph Marikle Aug 1 '11 at 14:44
It works great in the fiddle example, however when i try to use it for some reason bottom-div have a top position value of 0 –  jimmy Aug 1 '11 at 14:51
@jimmy huh... do you have a test site up that I could take a look at? –  Joseph Marikle Aug 1 '11 at 14:53
sure... bit.ly/qT8ToI if i manually set middle-wrap position:absolute, top:600. it works. but i dont know the position as top-wrap is browserheight. –  jimmy Aug 1 '11 at 14:59

You could do:

$(window).scroll(function(e) {
    var shape = $('#shape').position();
    var bottomDiv = $('#bottom-div').position();
    if (shape.top > bottomDiv.top){


fiddle here: http://jsfiddle.net/nicolapeluchetti/6hJeT/11/

share|improve this answer
That's interesting, I didn't realize that on objects with position: fixed the position value actually changes as the window scrolls down. –  hughes Jul 28 '11 at 14:30

Using window.scrollTop() will get you there.

Alterntively, for more complicated cases you may want to look at jquery waypoints plugin.

share|improve this answer

You could:

if($('#shape').offset().top >= $('#top-div').height()) alert("Boo");
share|improve this answer

Here you go: http://jsfiddle.net/6hJeT/21/

The trick is checking the scrollTop of the body (which means how much user has scrolled down) and compare it to the top position of your bottom div.

$(window).scroll(function () {
    if ((document.body.scrollTop +  + $("#shape").height()) >= $("#bottom-div").position().top)
share|improve this answer

Your Answer


