JavaScript
Article

jquery get elements currently in view

By Sam Deering

Here are some options using javascript and jquery to get elements currently in view (visible on screen). The appear plugin works very well.

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom >= docViewTop) && (elemTop < = docViewBottom));
}
[/js]

appear plugin: http://code.google.com/p/jquery-appear/

[js]
$('#foo').appear(function() {
  $(this).text('Hello world');
});

waypoints plugin: http://imakewebthings.github.com/jquery-waypoints/

Free Guide:

7 Habits of Successful CTOs

"What makes a great CTO?" Engineering skills? Business savvy? An innate tendency to channel a mythical creature (ahem, unicorn)? All of the above? Discover the top traits of the most successful CTOs in this free guide.

No Reader comments

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in JavaScript, once a week, for free.