How to know when a user scrolls past a <div>?

Question

I'm building something where I show users items that they haven't seen.

Each item is in a <div>, so when the user scrolls past a div, or views the div, I want that item to be marked as having been seen.

Google reader does this, if you scroll past an item in your feed there it automatically marks it as read.

How can this be tracked? Advice please.

Note: It shouldn't be restricted to using the mouse to scroll, hitting page down/up, using arrow keys, etc should also be counted. The main criteria is that the user has seen a div.

Answer 1

You need jQuery's scrollTop.

Something like:

$(window).scrollTop() > $('#mydiv').offset().top;

for when it first comes into view, or add $('#mydiv').height() to the top offset if you want it to be marked when it's fully in view.