jquery - how to determine if an Items of now viewable/in the window / below the fold

Question

with jquery, what's the best way to determine if an element is below the fold meaning it's also not in the window and not visible to the user?

Thanks

Answer 1

I assume you're referring to whether or not it has been scrolled out of view.

If so, try this:

if( $(window).scrollTop() + $(window).height() > $('#my_el').offset().top ) {
    // element is in view
}

Example: http://jsfiddle.net/8x4Zd/

(Click the result panel to test if the targeted element is in view. Then scroll down and repeat.)

If you want to make sure the entire element is in view, then add its .height() into the equation.

Example: http://jsfiddle.net/8x4Zd/1/

var win = $(window);
var el = $('#my_el');
var winPos = win.scrollTop() + win.height();
var elPos = el.offset().top + el.height();

if( winPos > elPos ) {
    // element is in view
}