Question

I have a long horizontal page like this:

<div id="viewport"></div>
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>

Div Viewport is positioned absolutely on the left edge of the screen. The rest of the divs are floated horizontally.

What I want to accomplish is that when each of the floating divs are scrolled into the viewport div, they change some css properties (like opacity). I want the div to become “active” or highlighted as it is scrolled by.

Thanks!

Answer 1

I don’t think you could make your own event handler to do this but you could just check in the code that moves the divs if they are inside the viewport and apply a highlight class using the jQuery .animate() function quite easily, something like this http://jsfiddle.net/sRhJH/24/