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.

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.

• javascript
• jquery
• html
• dhtml

• 3 As far as I know, they calculate each relevant div's offset from the top of the page and pare to the scroll height. Once scollHeight >= divHeight, then it's considered in-view. – Marc B Commented May 24, 2011 at 14:43

4 Answers 4

You need jQuery's scrollTop.

Something like:

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

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

You could use a solution like this, http://www.appelsiini/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?

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

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;
       //pare 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

});