[jQuery]要素が表示されてる間だけの条件分岐

特定要素がブラウザ上に表示されてるときだけに作用させたい場合の組み方。

動作環境
こんなかんじ
指定要素が複数ある場合
振り返り

動作環境

jQuery3で動作確認済み。

こんなかんじ

.targetが表示されてるときを発火条件にする。

<div style="height: 2000px;"></div>
<div style="height: 2000px;" class="target"></div>
<div style="height: 2000px;"></div>

こうなる。

$(function(){
    $(window).on('load resize scroll', function(){
        var target = $('.target');
        var nowPosition = $(window).scrollTop(); //ページの表示位置
        var windowHeight = $(window).height(); //ブラウザ自体の高さ
        var targetPosition = target.offset().top; //指定要素のページ位置
        var targetHeight = target.innerHeight(); //指定要素自体の高さ
        if(nowPosition + windowHeight > targetPosition && targetPosition + targetHeight > nowPosition){
            $('body').css('background','red');
        }else{
            $('body').css('background','');
        }
    })

指定要素が複数ある場合

こんな感じのがあったとする。

<div style="height: 2000px;"></div>
<div style="height: 2000px;" class="target"></div>
<div style="height: 2000px;"></div>
<div style="height: 2000px;" class="target"></div>
<div style="height: 2000px;"></div>
<div style="height: 2000px;" class="target"></div>
<div style="height: 2000px;"></div>

こうなる。

$(function(){
    $(window).on('load resize scroll', function(){
        var target = $('.target');
        var nowPosition = $(window).scrollTop();
        var windowHeight = $(window).height();
        var arrayCheck = new Array(); //配列を用意
        target.each(function(){ //ページ内の指定要素すべてを対象に処理
            var targetPosition = $(this).offset().top;
            var targetHeight = $(this).innerHeight();
            if(nowPosition + windowHeight > targetPosition && targetPosition + targetHeight > nowPosition){
                //個別に処理させたいときはここに書く
                arrayCheck.push(true); //表示してたら配列にtrueを格納
            }
        })
        //ページ全体に掛かる処理をしたい場合はこっちに書く
        if(arrayCheck.includes(true)){ //配列にtrueが含まれてたら動作
            $('body').css('background','red');
        }else{
            $('body').css('background','');
        }
    })
})

each()で指定要素それぞれを判定してるんで、個別処理をしたかったら.each()内のifに記述する。

個別とかいいから大枠で判定したい、該当classが表示されてるときにbodyとかheaderとかに作用させたい、みたいな場合は指定要素のどれかが表示されてることが発火条件になるんで、条件を満たしているものがあれば（配列にtrueがあれば）発火させるかんじ（デモ）。

振り返り

前に書いた記事からバージョンアップしたことになる。とんでもなく使い勝手が良くなってしまった。
前の記事は各要素の位置を取得して表示位置と照合してたんだけど、ダイレクトに判定させちゃえばいいじゃんっていう。

シンプルに書けるので普通に使う分には今回の内容でいいんだけど、同様の動作でも詳細に書けちゃうってことで場合によっては使いみちはあると思うんで残しておくことにする。