JavaScript
Article

jQuery check if element is in view

By Sam Deering

Some more jQuery snippets to check if element is in view.

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

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

    return ((elemBottom < = docViewBottom) && (elemTop >= docViewTop));
}

isInView: function(elem)
{
    var docViewTop = $(window).scrollTop(),
        docViewBottom = docViewTop + $(window).height(),
        elemTop = $(elem).offset().top,
        elemBottom = elemTop + $(elem).height();
    return ((elemBottom < = docViewBottom) && (elemTop >= docViewTop));
}

The best method I have found so far is the jQuery appear plugin. Works like a charm.

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

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