【jQuery】指定の要素が画面内に入った時だけ表示

指定した要素が画面内に入ったらclassをつける

「.select_element」は画面内に入ったらclassをつける要素
「.next_element」は「.select_element」の次の要素が入る。

$(window).on('load scroll', function() {
	//　「.select_element」が存在したら発火
	if($('.select_element').length){
	    add_class_in_scrolling($('.select_element'));
	}
});
 
// スクロールで要素が表示されている時にclassを付与する
function add_class_in_scrolling(target) {
    //　指定した要素の次の要素
    var nextElement = $('.next_element');
    var winScroll = $(window).scrollTop();
    var winHeight = $(window).height();
    var scrollPos = winScroll + winHeight;
    //　指定した要素が画面内に入ったらclass付与して出たら削除
    if(target.offset().top < scrollPos && nextElement.offset().top + winHeight > scrollPos) {
        target.addClass('show');
    }else{
        target.removeClass('show');
    }
}

参考
http://cly7796.net/wp/javascript/add-class-when-specified-element-is-displayed-by-scrolling/