jsで要素が画面内に表示されているか判別する方法

使い方

function mark_block() {
    $(".TargetBlock").each(function () {
        add_class_when_visible($(this));
    });
}

function add_class_when_visible(target) {
    // スクロール位置を取得
    var scrollTop = $(window).scrollTop();
    var scrollBtm = scrollTop + $(window).height();

    // 対象要素の位置を取得
    var targetTop = target.offset().top;
    var targetBtm = targetTop + target.height();

    // 画面内にある場合
    if (scrollBtm > targetTop && scrollTop < targetBtm) {
        target.addClass('is-show');
    } else {
        target.removeClass('is-show');
    }
}

$(function(){
    $(window).on("scroll", function () {
        mark_block();
    });

    mark_block();
});

参考