スナップスクロール内でフェードインを実行したさいに、下からスクロールした時にもフェードインできるようにさせたいです。

Question

前提・実現したいこと

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

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

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

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

.position{
position:relative;
}

.text{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
width:200px;
height:200px;
}

$(".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");
  }
});

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

Answer 1

offset().top; は画面を基準とした位置を返します。
やりたいことは、.text要素が画面内に位置するなら表示させたいということだと思いますので、
offset().top; が ０以上画面高以下なら表示、それ以外なら非表示というようにすればいいでしょう。

下記のコードは、上記に要素の高さを考慮して範囲を設定しています。

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

.text {
  opacity: 0;
  transition: 3s;
}
.text.fadeIn {
  opacity: 1;
  transition: 3s;
}

Comments

[webkkmm]

hatena19様、ご回答ありがとうございます。offset().top; が ０以上画面高以下なら表示、それ以外なら非表示とさせたことで実現することができました。本当にありがとうございました。