This little snippet will add the class in-view to elements with the class waiting. This is great to use with CSS3 animations added to the in-view class.


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));
}

$(window).scroll(function () {
    $('.waiting').each(function () {
        if (isScrolledIntoView(this) === true) {
            $(this).parent().addClass('in-view');
        }
    });

});   

Leave a Reply