JQuery - How to determine if an item is currently outside the viewport?

Question

I am creating a page that will use ajax to update the main content area. Users will click on items from the left hand menu bar to refresh the div to the right with the search results.

I want to determine if the user is still scrolling, forcing the right side of the results div to move outside the viewport, but does it detect that?

Answer 1

Lack of tests / cross-browser assurances / sample code, but see $elem.offset().top for $(document).scrollTop() - You may be your solution.

You may need the .height() this element and window .

Brodingo in #jQuery on freenode just connected me with a Viewport Selectors plugin that could simplify it.

Answer 2

I had some success in the following: where this_element, which is outside the viewport (above or below its borders), starts YOUR ACTION:

 function scroll_to(this_element){ var banner_height = 145; var window_height = $(window).height(); var scroll_position = $(window).scrollTop(); var element_position = $(this_element).position().top; var element_height = $(this_element).height(); if(((banner_height + element_position) < scroll_position) || ((scroll_position + window_height) < (banner_height + element_position + element_height))){ //YOUR ACTION } }