jQueryでスクロール時に特定の要素が画面内に入ったらクラスを付与したい

Question

###jQueryでスクロール時に特定の要素が画面内に入ったらクラスを付与したい

Wordpressでスクロールアニメーションを実装するために、jQueryでスクロール時に特定のクラスを持った要素が画面内に入った場合、新たにクラスを付与したいのですが上手く動作しない状態です。

エラー内容

画面スクロールしてjs-scroll-triggerクラスが画面内に入った場合is-activeクラスを付与したいです。

クラスは意図した通り付与されるのですが、クラス付与されるタイミングが画面スクロール時ではなく、レンダリングが終わった時点ですでにis-activeクラスが付与された状態になっています。

ソースコード

<div class="u-fade-type-slide js-scroll-trigger">
 <img src="xxx.jpg" alt="">
</div>

  (function ($) {
    if ($('.js-scroll-trigger').length) {
        scrollAnimation();
    }
  
     function scrollAnimation() {
        $(window).scroll(function () {
            $(".js-scroll-trigger").each(function () {
                let position = $(this).offset().top,
                    scroll = $(window).scrollTop(),
                    windowHeight = $(window).height();
  
                if (scroll > position - windowHeight + 200) {
                    $(this).addClass('is-active');
                }
            });
        });
    }
    $(window).trigger('scroll');
}(jQuery));

試したこと

下記サイトを参考にしたもので、ローカルで検証したところ意図した挙動になったため、Wordpressでも同じ動きができないかと試していたところ今回の質問の状態になりました。
https://moshashugyo.com/media/animate-on-scroll

■コンソールの確認
エラーは表示されませんでした。

■jQueryバージョンの確認
参考サイトではjQuery3.3.1、検証しているWordpressサイトではjQuery2.2.4を使用していました。参考サイトのコードをjQuery2.2.4で実行したところ問題なく動作したため、バージョンの問題ではないと判断しました。

■違うブラウザで確認
Chrome、Firefox両方で確認しキャッシュクリアしましたが、同じ挙動でコンソールにエラーはありませんでした。

■console.logで確認
本当にif文の中に分岐しているのか確認しました。

if (scroll > position - windowHeight + 200) {
  $(this).addClass('is-active');
  console.log('xxx');
}

ページスクロールして確認すると、js-scroll-triggerクラスの要素を一つ見つけた時に、ページ内の全てのjs-scroll-triggerクラスの要素に処理をしてしまっているようでした。

しかし、同じ処理をしていてもローカルでは問題なくクラス付与できており、どう検証を進めて行けば良いのか行き詰まってしまいました。
中途半端な質問になってしまい大変恐縮なのですが、どう検証していけば良いかご教授いただけないでしょうか。

補足情報

Wordpressは5.8.1を使用しています。

Comments

[yambejp]

画面にはいったら付加するのと付加された状態で画面に入るのは
どう違うか説明してください

[Lhankor_Mhy]

同じ場所で console.log(scroll , position , windowHeight) としてみるとか。

[Ukwfe65]

クラス付与されるタイミングでアニメーションを開始したかったためです。

[Ukwfe65]

ありがとうございます。とにかくconsole.logで確認してみます。

Answer 1

当てずっぽうで

$(window).trigger('scroll');
↓
$(window).on('load',function(){$(window).trigger('scroll');});

これでどうなりますかね

Comments

[Ukwfe65]

ご回答ありがとうございます。
ご指摘の箇所変更しても変わらず、条件式が間違っていることが原因のようでした。

こちらでスクロール位置を取得できました。
if (scroll > position - 任意の数字) {

お騒がせし申しわけありませんでした。