スナップスクロール内にフェードインさせ、下からスクロール時にもフェードインできるようにさせる方法

前提・実現したいこと

スクロールスナップ内にフェードインを実装しようとしています。
２つ目のsection内にあるdivタグをフェードインさせたいです。上からスクロールした際にはaddClassによってクラスが付与されてフェードインができるのですが、下からスクロールした際にはクラスが付与されたままになってしまいフェードインができない状態です。
下からスクロールした際にもフェードインさせたいです。

下記が各コードになります

html

<main class="container"> <section class="scroll-snap"> </section><section class="scroll-snap"> <div class="text">　//この部分をフェードイン <p>テキスト</p></div></section><section class="scroll-snap"> </section>

css

container{overflow: auto;scroll-snap-type: y mandatory;height: 100vh;}.scroll-snap{ height: 100%; scroll-snap-align: start;}

js

$(".container").scroll(function () { let scroll = $(".container").scrollTop(); // スクロール位置を取得 let triTop = $(".text").offset().top; // 要素の上部の位置を取得 let winHeight = $(".scroll-snap").height(); if (scroll >= triTop - winHeight ) { $(".text").addClass("fadeIn"); } else { $(".text").removeClass("fadeIn"); }});

下スクロールからの高さ位置の取得方法と位置を取得した後どのように条件式を記述したら下からスクロールした際もフェードインができるようになるかわからないです。
なかなか解決策が見つからず困っております。解決策や対象方をご存知の方がいましたら教えてください。
よろしくお願いします。