web関連

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

2018/12/03

2018/11/29

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

jQueryで指定した要素が画面内に入ったらclassをつけたい時に使用したコード

指定した要素が画面内に入ったら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 && nextSelcter.offset().top > scrollPos) {
        target.addClass('show');
    }else{
        target.removeClass('show');
    }
}
指定した要素の上と下の位置を「.offset().top」で取得したかったけど、指定した要素の下の位置の取得方法わからなかったから次の要素を取得した
他のやり方とるとしたら指定要素の高さ取得して上位置から高さ分はclassつけて、それを過ぎたらclass削除みたいな書き方になるんかな?

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

 

参考記事カスタマイズしたんだけど、javascriptで関数って使ったことなかったから最初なんだこれってなった
便利っすね、今度使おっと