How can you use jQuery measure how far down the user has scrolled?

Question

I need to change the style of an element after the user has scrolled down beyond a certain number of pixels, and then change it back once the user has scrolled back up. I'm using jQuery already so I'd like to use jQuery if possible. Can anyone provide an example where you add a a classname to a div once the user has scrolled beyond 200 pixels and then remove the classname once the user has scrolled back up to less than 200 pixels?

Answer 1

See scrollTop, scrollLeft and Events/Scroll.

Example:

$('div#something').scroll(function () {
    if ($(this).scrollTop() > 200) {
        $(this).addClass('foo');
    } else {
        $(this).removeClass('foo');
    }
});