How do I know when a user scrolls a <div> page?

Question

I am creating something where I will show users elements that they have not seen.

Each element is in a <div> , so when a user scrolls past a div or views a div, I want this element to be marked as seen.

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

How can this be tracked? Please advise.

Note. You should not limit the use of the mouse for scrolling, hitting the page up / down, using the arrow keys, etc. should also be considered. The main criteria are that the user has seen the div.

Answer 1

You need jQuery scrollTop .

Something like:

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

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

Answer 2

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

Or see this for other solutions: Detecting divs displayed in a window for implementing Google-Reader-like-auto-mark-as-read?

Answer 3

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

Answer 4

I think you will need something like this ...

 $(window).scroll(function(){ var scroll = $(this).scrollTop(); var vieweditems = $('div').filter(function(){ return scroll> $(this).offset().top; //compare the div 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 });