Question

I’ve got a bunch of div width heights over 1000px under eachother. How can I determine a div position relative to the top of the window?
E.g.

<div>height:1000px</div>
<div>height:1000px</div>
<div>height:1000px</div>
<div class="this_div">height:1000px</div>
<div>height:1000px</div>
<div>height:1000px</div>
<div>height:1000px</div>

I’m trying something like this.

$(function(){
    $(window).bind('scroll resize',function(e){
        var scrolledY = $(window).scrollTop(),
            scrolling = scrolledY-4900;
        if(scrolledY > 4900){
            $('div.this_div').css('background', 'red');
        }
        if(scrolledY > 5500)){
            $('div.this_div').css('background', 'none');
        }
    });
});

As you can see, if you’ve scrolled 4900px it does something. Isn’t it possible to do something when you’ve scrolled till the div, instead of determining at what px it is?

Answer 1

You’ll need the .offset() function for this. It helps you determine the offset of your “this_div” for the scrolling method (instead of the 4900 value you’re passing along).

JSFiddle.