Webサイトのインタラクティブ性を高める：スクロールイベントの活用

2024-04-08

jQueryでウィンドウの高さとスクロール位置を取得する方法

概要

$(window).height()

ウィンドウの高さ（ピクセル単位）を取得します。
スクロール位置とは関係なく、常にウィンドウ全体の高さを返します。

$(window).scrollTop()

現在のスクロール位置（ピクセル単位）を取得します。
ウィンドウの上端からスクロールバーが移動した距離を表します。

コード例

// ウィンドウの高さ
const windowHeight = $(window).height();

// 現在のスクロール位置
const scrollTop = $(window).scrollTop();

// スクロール位置に応じて処理を行う
if (scrollTop > 100) {
  // ヘッダーを非表示にする
  $('.header').hide();
} else {
  // ヘッダーを表示する
  $('.header').show();
}

ウィンドウの幅を取得するには、$(window).width()を使用します。
スクロール位置を特定の位置に設定するには、$(window).scrollTop(position)を使用します。

サンプルコード：ウィンドウの高さとスクロール位置を取得して処理を行う

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>サンプルコード：ウィンドウの高さとスクロール位置を取得</title>
  <style>
    body {
      height: 2000px;
    }
    .header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100px;
      background-color: #ccc;
    }
    .content {
      margin-top: 100px;
    }
  </style>
</head>
<body>
  <header class="header">
    <h1>サンプルコード</h1>
  </header>
  <div class="content">
    <p>このページはスクロールできます。</p>
    <p>スクロール位置に応じてヘッダーの表示・非表示を切り替えます。</p>
  </div>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
  $(function() {
    // ウィンドウの高さ
    const windowHeight = $(window).height();

    // スクロールイベント
    $(window).scroll(function() {
      // 現在のスクロール位置
      const scrollTop = $(window).scrollTop();

      // スクロール位置に応じて処理を行う
      if (scrollTop > 100) {
        // ヘッダーを非表示にする
        $('.header').hide();
      } else {
        // ヘッダーを表示する
        $('.header').show();
      }
    });
  });
  </script>
</body>
</html>

このコードを実行すると、以下の動作を確認できます。

ページが読み込まれたとき、ヘッダーが表示されます。
スクロールバーを下にスクロールすると、スクロール位置が100pxを超えた時点でヘッダーが非表示になります。

コード解説

$(window).height()：ウィンドウの高さ（ピクセル単位）を取得します。
$(window).scrollTop()：現在のスクロール位置（ピクセル単位）を取得します。

ウィンドウの高さとスクロール位置を取得するその他の方法

document.documentElement.clientHeight と document.documentElement.scrollTop

document.documentElement は、HTML要素を表します。

offset() メソッド

$(window).offset().top は、ウィンドウの上端から現在のスクロール位置までの距離（ピクセル単位）を取得します。

getBoundingClientRect() メソッド

document.documentElement.getBoundingClientRect().height は、ウィンドウの高さ（ピクセル単位）を取得します。

これらの方法は、それぞれ微妙な違いがあります。どの方法を使用するかは、状況によって異なります。

それぞれの方法の比較

方法	取得する値	備考
`$(window).height()`	ウィンドウの高さ	スクロール位置とは関係なく、常にウィンドウ全体の高さを返す
`$(window).scrollTop()`	現在のスクロール位置	ウィンドウの上端からスクロールバーが移動した距離を表す
`document.documentElement.clientHeight`	ウィンドウの高さ	`$(window).height()` とほぼ同じ
`document.documentElement.scrollTop`	現在のスクロール位置	`$(window).scrollTop()` とほぼ同じ
`window.innerHeight`	ウィンドウの高さ	`$(window).height()` とほぼ同じ
`window.pageYOffset`	現在のスクロール位置	`$(window).scrollTop()` とほぼ同じ
`$(window).offset().top`	ウィンドウの上端から現在のスクロール位置までの距離	スクロール位置だけでなく、ウィンドウのフレームを含めた位置も取得できる
`document.documentElement.getBoundingClientRect().height`	ウィンドウの高さ	`$(window).height()` とほぼ同じ
`document.documentElement.getBoundingClientRect().top`	ウィンドウの上端から現在のスクロール位置までの距離	`$(window).offset().top` とほぼ同じ