スクロールで要素を表示させる jQuery 実装メモ jQuery

概要

スクロールに応じて要素を表示させるための jQuery コードの実装方法。
特定の要素が入ったタイミングでアニメーションのように表示されるエフェクトを実現できる。

使用コード

$(function () {
  // .one クラスの要素をそれぞれ処理
  $(".one").each(function (i, elem) {
    var objTop = $(elem).offset().top; // 要素のトップ位置を取得
    
    // ウィンドウの load, scroll, resize イベントで処理を実行
    $(window).on("load scroll resize", function () {
      var windowHeight = $(window).height(); // ウィンドウの高さ
      var scrolltop = $(window).scrollTop(); // 現在のスクロール位置
      var showClass = "show"; // 表示時に追加するクラス
      var timing = 300; // 表示するタイミングを調整するための値

      // 要素が特定の位置に達したらクラスを追加、それ以外は削除
      if (scrolltop >= objTop - timing) {
        $(elem).addClass(showClass);
      } else {
        $(elem).removeClass(showClass);
      }
    });
  });
});

実装例

次に、このコードを実際にどのように HTML と CSS と組み合わせて使用するかを示す。例えば、以下のように .one クラスを持つ要素がスクロールに応じて表示されるようにする。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>スクロール表示エフェクト</title>
  <link rel="stylesheet" href="styles.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="script.js"></script>
  <style>
    .one {
      opacity: 0;
      transition: opacity 0.5s ease-in-out;
    }
    .one.show {
      opacity: 1;
    }
  </style>
</head>
<body>
  <div class="one">この要素がスクロールすると表示されます。</div>
  <div class="one">次の要素もスクロールで表示されます。</div>
  <div class="one">スクロールするごとに表示されます。</div>
</body>
</html>

その他メモ

timingの調整: timing の値を変えることで、要素がスクロールにより表示されるタイミングを調整可能。例えば、timingを大きくすると、より早く（上の位置から）要素が表示される。
scroll, resize イベントの使用: このコードでは、load、scroll、resize イベントに反応して処理が行われる。これにより、ユーザーがページをスクロールしたり、ブラウザのサイズを変更したときに要素の位置に応じて適切に表示・非表示が行われる。
パフォーマンスの考慮: スクロールイベントは頻繁に発火するため、パフォーマンスが気になる場合がある。そのため、DebounceやThrottleを使って処理回数を減らすと、パフォーマンスを向上できる。
CSS トランジション: CSSのトランジション効果を使うことで、要素がなめらかに表示されるエフェクトを簡単に追加可能。