【javascript】 classList.removeが効かない

Question

実現したいこと

スクロールイベントで、指定の位置までスクロールしたら、
classを追加して、アニメーションさせたいです。
指定の位置でなければ、classを削除させて、また指定の位置までスクロールしたら、
アニメーションさせたいのですが、
classが追加されるところまではできましたが、
classの削除ができません。

前提

jqueryではなく、javascriptを使用して行いたいです。
classに「panda」を持っている要素全てにアニメーションさせたいです。
指定の位置までスクロールしてきたら、class「fadeUp」を追加、
指定の位置でなければ、class「fadeUp」を削除したいです。
コードが長すぎるので、一部抜粋ですが、
classに「panda」を持っている要素は、他にも４つあります。

発生している問題・エラーメッセージ

エラーメッセージは出ていません。

該当のソースコード

<section id="vision"><!---Our Vision--->
      <h1 class="name panda">Our Vision</h1>
      <h1 class="upanime">世の中の課題をITで解決して、<br>関わった<span>世界中の人たちを幸せにする</span></h1>
      <div id="world"><!---三か条-->
        <div class="third upanime">
          <h1>ITを通じて<br>人々の可能性を広げる</h1>
          <h2>イノベーションを起こし新たな価値を創造する</h2>
        </div>
        <div class="third upanime">
          <h1>世界を代表する<br>自社サービスを作る</h1>
          <h2>世の中にインパクトを与える</h2>
        </div>
        <div class="third upanime">
          <h1>世界から選ばれる<br>企業へ</h1>
          <h2>常に最高のパフォーマンスを発揮します</h2>
        </div>
      </div><!---三か条-->
    </section><!---Our Vision--->

.fadeUp {
	animation-name: fadeUpAnime;
	animation-duration: 0.7s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes fadeUpAnime {
	from {
		opacity: 0;
		transform: translateY(-50px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

 const element = document.querySelectorAll(".panda");
    const screenHeight = window.scrollY;
    let height = window.innerHeight;
    const apperPoint = screenHeight*0.3;

    window.addEventListener("scroll",() => {
      for(let i = 0; i < element.length; i++){
        const elemPos = element[i];
        const elementHeightTotop = elemPos.getBoundingClientRect().top;
        if(screenHeight >= elementHeightTotop - height){
          elemPos.classList.add("fadeUp");
        } else {
          elemPos.classList.remove("fadeUp");
        }
      }
    })

試したこと

elseの部分を下記に書き換えてもダメでした。
解決方法が見出せないため、質問させていただきました。

else if (elemPos.classList.contains('gadeUp') == true) {
elemPos.classList.remove("fadeUp");

Comments

[m.ts10806]

.panda持ってる要素は提示htmlには1つしかないようです

[koteharu]

すいません。
コードが長いので、一部抜粋しております。
.pandaを持っている要素は、他に４つあります。

[Lhankor_Mhy]

ご提示のコードを試してみましたが、スクロールに従い.fadeUpがついて、逆にスクロールすると.fadeUpが削除されていました。つまり、問題が再現しませんでした。

[koteharu]

確認していただき、ありがとうございました。
もう一度、このコードを試してみたらできました。
確認不足で、申し訳ございません。

[m.ts10806]

今後で良いので最小構成で説明文と整合性の取れたコード提示願います。余計な詮索ややり取りが増えると齟齬も大きくなるので

[koteharu]

かしこまりました。
分かりづらく申し訳ございません。
また、検証も足りずすいませんでした。
今後とも今後共よろしくお願いします。

Answer 1

    const screenHeight = window.scrollY;
    ...
    window.addEventListener("scroll",() => {

これだと、変数 screenHeight の値はこのコードの実行時のまま変化しません。スクロールした時点での window.scrollY の値が必要なら、const screenHeight = window.scrollY; はイベントリスナの中に入れる必要があります。

Answer 2

記載のコードをもう一度、試したらできました。
確認不足で、申し訳ございませんでした。

Answer 3

ちょっと状況が把握できていませんが
IntersectionObserver
でチェックする案件ではないでしょうか？

それとscreenHeightをwindowのスクロールイベント内で再取得しないと
一定の値になりそうです

Comments

[koteharu]

すいません。解決しました。
見ていただいたのに、申し訳ございませんでした。