Take the 2-minute tour ×

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.

share|improve this question
As far as I know, they calculate each relevant div's offset from the top of the page and compare to the scroll height. Once scollHeight >= divHeight, then it's considered in-view. –  Marc B May 24 '11 at 14:43

4 Answers 4

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.

share|improve this answer

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?

share|improve this answer

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

share|improve this answer

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

    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
      //Remove the class which distinguishes the unread and read items
          return this.id.split('_')[1];
      //This is the collection of ids of viewd divs
      //vieweditems  now holds the ids of viewed divs

share|improve this answer
How can I identify in this case which div was viewed so I could send an ajax request to mark that div as 'viewed' in the database? Divs will have ids e.g item_1, item_2 etc. –  Click Upvote May 24 '11 at 15:02
@Click Upvote See edit... –  TheSuperTramp May 24 '11 at 15:07

Your Answer


