表示領域に入ったらクラスを付けて、表示領域から外れると、クラスを外す

Question

タイトルのとおりなのですが、
表示領域に入ったらクラスを付与し、画面から外れると、クラスも外れる仕組みを作りたいのですが、
いろいろ調べて下記の用に記述したろころ、表示領域よりも上にスクロールした時は、クラスが外せました。
ただ、下にスクロールした時は外れてません。

	$(window).scroll(function (){
		$(".js-ani").each(function(){
			var articlePos = $(this).offset().top;    
			var scroll = $(window).scrollTop();
			var windowHeight = $(window).height();
			var endPos = articlePos + $(window).outerHeight();
			if (scroll > articlePos - windowHeight + windowHeight/5 && scroll < endPos){
				$(this).addClass("js-ani-on");
			} else {
				$(this).removeClass("js-ani-on");
			}
		});
	});

下にスクロールした時に外す仕組みを「endPos」で定義してみたのですが、ここの式がおかしいようです。
ご教示いただければ幸いです。
いろいろな要素にクラスを付与できればと考えています。

Answer 1

            //var endPos = articlePos + $(window).outerHeight();
            var endPos = articlePos + $(this).outerHeight();

以前同様の質問に回答しました。
https://teratail.com/questions/229131

今回は対象の片方が viewport なので Intersection Observer を使うとわかりやすいかと思います。
https://developer.mozilla.org/ja/docs/Web/API/Intersection_Observer_API

    let observer = new IntersectionObserver(changes => {
        for (let change of changes) {
            $(change.target).toggleClass('js-ani-on', change.isIntersecting);
        }
    }, {
        rootMargin: '0px 0px -20% 0px',
        delay: 100 // Inersection Obeserver v2
    });
    $('.js-ani').each((_index, element) => observer.observe(element));

Inersection Obeserver v2 に delay オプションがあり、Chrome で実装済みです。
https://w3c.github.io/IntersectionObserver/v2/#dom-intersectionobserverinit-delay

Comments

[jyoze]

ご教示くださりありがとうございます。
勉強不足で申し訳ありません。こちらの記述だけで動くのですね。
まだ試しておりませんが、びっくりです。
Intersection Observerの理解を深め、対応してみたいと思います。
Intersection ObserverはIE11には対応していないようですね。
ここが対応していたら完璧でした^^;

Answer 2

詳しい仕様がわかりませんが、以下の理解で実装したデモをおいておきます。

1. .js-aniクラスをもつ要素は、要素が画面内に表示されているとき、.js-ani-onクラスが追加される
2. 1.に該当しない場合、.js-ani-onクラスが削除される
3. PCのみ動作対応
4. windowのリサイズ対応やら、細かい条件はなし

デモ

引数のoptions.offsetについて

「要素のすべてが画面内に表示されているとき」という部分があいまいだったので、関数の引数で変えられるようにしておきました。画面の上の方の「fork」とある部分をクリックするとデモをコピーして適当にいじれます。

offsetを固定値でなくて、もっと要素ごとに変化させたい場合は、以下のデモを参考にしてください。

デモ2

---

ここまで言っておいてなんですが、下記の選択肢も検討の価値があると思います。

対応ブラウザによっては、Intersection Observer APIの使用も検討できます。画面(viewport)と要素の位置関係に関するAPIです。

もしくは、scrollに関すること（スマホ対応とかwindowがリサイズしたときに要素の座標が動いた時の判定とか）を色々やってくれるScrollMagicというライブラリもあります。「Made with ScrollMagic」という部分に実際の事例が載っているのと、こちらに公式のサンプルがあります。日本語情報も多いです。ただ、目的によっては、手段がおおげさかもしれません。

Comments

[jyoze]

大変わかりやすくご教示くださりありがとうございます。
ソースのコメントのおかげて、とてもわかり易く理解できました。
ScrollMagicは利用したことがあるのですが、おっしゃる通り、少しおおげさに感じましたので、今回は少ないJSの記述とCSSで対応できればと考えておりました。
Intersection Observer APIについても初めて聞きましたので、是非勉強してみたいと思います！
本当にありがとうございます。

[NozomuIkuta]

解決したようでよかったです。
x_xさんの回答のコメントを見るとIntersectionObserver APIはブラウザの対応で今回は使えないようですが、polyfillも用意されているようなので、調べてみるといいかもしれません。

https://github.com/w3c/IntersectionObserver

詳しい使い方やpolyfillそのものの意味などは適当に調べてください。
「api名 polyfill」などで調べると出てきると思います。

[jyoze]

ご親切にありがとうございます。
私も昨日からIntersectionObserverについて、調べておりまして、
Polyfillで非対応のブラウザにも対応できることを知りました。
下記を記述することで、対応できると記載があるのですが、
<script src="https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>
IE11で確認したところ、動きませんでした。
もう少し調べてみます！いろいろとありがとうございます！