javascriptでスクロールをきっかけにアニメーションを実行したい

前提・実現したいこと

HTML,SCSS,JavaScript,jQueryでサイトを作っています。
その中で、特定の位置までのスクロールをきっかけに要素がフェードアップするアニメーションをつけたいのですが、アニメーションが実行されません。

該当のソースコード

html
1<div id="pricing-plan">
2    <h1 class="section-title">ほげほげ</h1>
3    <div class="pricing-plan-detail fadeUpTrigger">
4        <img src="images/Piggy-bank-amico.svg">
5        <p>
6            ほげほげほげ<br>
7            <span class="pricing-plan-marker">ほげほげほげ</span><br>
8            ほげほげほげ
9        </p>
10    </div>
11</div>

scss
1//fadeUp animation
2.fadeUp {
3  animation-name: fadeUpAnime;
4  animation-duration: 0.5s;
5  animation-fill-mode: forwards;
6  opacity: 0;
7}
8
9@keyframes fadeUpAnime {
10  from {
11    opacity: 0;
12    transform: translateY(100px);
13  }
14
15  to {
16    opacity: 1;
17    transform: translateY(0);
18  }
19}
20
21.fadeUpTrigger {
22  opacity: 0;
23}
24
25#pricing-plan {
26        margin-bottom: 100px;
27
28        .section-title {
29          &::after {
30            width: 20%;
31          }
32        }
33
34        .pricing-plan-marker {
35          background: linear-gradient(transparent 50%, #fde975 50%);
36        }
37
38        img {
39          height: 250px;
40        }
41      }

javascript
1// 動きのきっかけとなるアニメーションの名前を定義
2function fadeAnime() {
3  // ふわっ
4  $(".fadeUpTrigger").each(function () {
5    //fadeUpTriggerというクラス名が
6    var elemPos = $(this).offset().top - 50; //要素より、50px上の
7    var scroll = $(window).scrollTop();
8    var windowHeight = $(window).height();
9    if (scroll >= elemPos - windowHeight) {
10      $(this).addClass("fadeUp"); // 画面内に入ったらfadeUpというクラス名を追記
11    } else {
12      $(this).removeClass("fadeUp"); // 画面外に出たらfadeUpというクラス名を外す
13    }
14  });
15}
16
17// 画面をスクロールをしたら動かしたい場合の記述
18$(window).scroll(function () {
19  fadeAnime(); /* アニメーション用の関数を呼ぶ*/
20}); // ここまで画面をスクロールをしたら動かしたい場合の記述
21
22// 画面が読み込まれたらすぐに動かしたい場合の記述
23$(window).on("load", function () {
24  fadeAnime(); /* アニメーション用の関数を呼ぶ*/
25}); // ここまで画面が読み込まれたらすぐに動かしたい場合の記述
26

試したこと

誤字の確認
JavaScriptファイルがきちんと読み込まれているか確認
jQueryのバージョンの確認
jQueryの読み込みの確認

補足情報（FW/ツールのバージョンなど）

jquery-3.6.0
Safari、chrome両方で試しました。

Lhankor_Mhy

2021/12/09 07:18

ご提示のコードを試してみましたが、問題なく動作しました。ご提示のコードに問題の原因はなく、ご提示いただいていない部分に原因があるかもしれません。

mymlml

2021/12/09 08:24 編集

確認ありがとうございます！こちらのcodepen上で試してみたところ、私の環境では動作しなかったのですが、（　https://codepen.io/mymlml/pen/GRMqOQK　）こちらでも正しく動作するでしょうか…？

Lhankor_Mhy

2021/12/09 08:30

動作しないですね。この Codepen のコードが動作しない原因を回答すればいいのですか？

mymlml

2021/12/09 08:33

はい。お願いします！

行動規範の内容に同意します

回答2件

ベストアンサー

こちらに提示されているcssには書かれていませんが、overflowでscrollが指定されているとscrollイベントが起こらなくなることが原因と推測されます。
Codepenの方ではbody .container mainにoverflow-y: scroll;とあるようなので、その部分を削除してみてください。

投稿2021/12/09 14:39

cerfweb

総合スコア1907

mymlml

2021/12/10 02:13

回答ありがとうございます！ overflow-y: scroll;　を削除したところ、フェードアップするようになりました。ただ、この　overflow-y: scroll;　がサイトのヘッダーの上部固定に関わっていたようで、削除してしまうと、ヘッダーが画面上部に固定されなくなってしまいました。現在、このサイトは display: flex; を使ってヘッダーとフッターを画面上下に固定しているのですが、スクロールイベントを使ってアニメーションなど実装したい場合は position:fixed; など他の方法でスティッキーヘッダーを実装するしかないのでしょうか。もしいい方法をご存知であれば、ご教示いただけるとありがたいです。

行動規範の内容に同意します

jQuery を読み込んでいないのが原因です。

参考：
ライブラリの読み込み | CodePenの使い方(知らない人向け) - Qiita

投稿2021/12/09 08:58

Lhankor_Mhy

総合スコア36960

mymlml

2021/12/09 09:12 編集

ありがとうございます！codepen上では動く様になりました！ただ私のローカル環境ではまだ動かない状態です。（最終的には私のローカル環境で動かしたいと考えています。説明不足になってしまい申し訳ありません。）ローカル環境でjQueryの読み込みを再度確認してみたのですが、読み込まれている様です… 他に載せた方がいい部分など指示していただけるとありがたいです。