How to know when a user scrolls past a ?

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.

Answer 2

You could use a solution like this, http://www.appelsiini.net/projects/viewport, which I used in the past.

Or see this for other solutions: Detecting divs as rendered in the window to implement Google-Reader-like auto-mark-as-read?

Answer 3

Have a look at $("#divid").scrollTop().

Answer 4

I think you'll need something like this...

$(window).scroll(function(){
    var scroll = $(this).scrollTop();
    var vieweditems = $('div').filter(function(){
       return scroll> $(this).offset().top;
       //compare the div's offset top with the window scroll position 
       // this returns the collection of viewed divs
    })// this object is colleection of viewd divs
      .removeClass('hilight')
      //Remove the class which distinguishes the unread and read items
      .map(function(){
          return this.id.split('_')[1];
      }).get();
      //This is the collection of ids of viewd divs
      //vieweditems  now holds the ids of viewed divs

});