jQuery使用：スクロール量によるイベント発火

※ 当サイトではアフィリエイト広告を利用しています。

こんにちは、meiです。
今回はjsを使ってスクロール量に応じてイベントを起こす処理についてまとめていきます。
スクロール量によるイベントには下図の4点の値が必要になります。

①スクロール量　$(window).scrollTop();で取得
②画面の高さ　$(window).height();で取得
③対象要素（クラス名：element)のY座標の位置　$(‘.element’)offset().top;で取得
④対象要素（クラス名：element)の高さ　$(‘.element’).outerHeight();

A地点(画面下部）に対象要素の上部が重なったときに発火させる場合

let winH = $(window).height();
let elmTop = $('.element').offset().top;

$(window).on('scroll', function(){
 let scroll = $(window).scrollTop();
 if(scroll >= elmTop - winH){
 //ここにイベントを書く
 } 
});

B地点（画面中央）に対象要素の上部が重なった時に発火させる場合

画面の高さを2分し中央値を出します。

let winH = $(window).height();
let elmTop = $('.element').offset().top;

$(window).on('scroll', function(){
 let scroll = $(window).scrollTop();
 if(scroll >= elmTop - winH/2){
 //ここにイベントを書く
 } 
});

C地点(画面上部）に対象要素の上部が重なった時に発火させる場合

let elmTop = $('.element').offset().top;

$(window).on('scroll', function(){
 let scroll = $(window).scrollTop();
 if(scroll >= elmTop){
 //ここにイベントを書く
 } 
});

対象要素の中央、または下部が重なった時に発火させる場合

上図の④、対象要素（クラス名：element)の高さの取得が必要になります。
例えばB地点に対象要素の中央が重なった時に発火させる場合は以下のコードになります。

let winH = $(window).height();
let elmTop = $('.element').offset().top;
let elm = $('.element').outerHeight();
let elmCenter = elmTop + elm/2

$(window).on('scroll', function(){
 let scroll = $(window).scrollTop();
 if(scroll >= elmCenter - winH/2){
 //ここにイベントを書く
 } 
});

$(‘.element’).outerHeight();で対象要素の高さを取得後、要素のY座標に要素高さの二分した値を足した値を用います。

対象要素の下部でイベント発火させる場合は以下です。

let winH = $(window).height();
let elmTop = $('.element').offset().top;
let elm = $('.element').outerHeight();
let elmBtm = elmTop + elm

$(window).on('scroll', function(){
 let scroll = $(window).scrollTop();
 if(scroll >= elmBtm  - winH/2){
 //ここにイベントを書く
 } 
});