特定の場所までスクロールしたら処理を発動させる方法
Webサイトを運営していると、「特定のセクションまでスクロールしたら、ヘッダーの色を変えたい」「途中からサイドバーを追従させたい」といった動きを実装したい場面がありますよね。
今回は、JavaScript (jQuery) を使って、指定した要素の位置までスクロールしたら、特定の要素（例：ヘッダー）にCSSクラスを追加・削除する方法をご紹介します。
デモ：スクロールでヘッダーの色が変わる
まずは実際の動作デモをご覧ください。下にスクロールしていき、2つ目のセクション（「切り替えポイント」）が画面上部に達すると、ヘッダーの背景色が変わります。
実装コード (JavaScript / jQuery)
使用するコードは以下の通りです。この例ではjQueryを使用しています。
const fix_items = $('#header'); // スタイルを変更したい要素（ヘッダー）
const switch_point = $('.js-switch_point').offset().top; // 切り替えの目印となる要素の高さ（ページ上端からの距離）を取得
$(window).on("scroll", function() {
// ウィンドウのスクロール量をチェック
if ($(this).scrollTop() > switch_point) {
// スクロール量が切り替えポイントを超えたら 'fix' クラスを追加
fix_items.addClass('fix');
} else {
// スクロール量が切り替えポイントより上に戻ったら 'fix' クラスを削除
fix_items.removeClass('fix');
}
});
※別途CSSで.fixクラスのスタイル（例：background-color: #333;など）を定義しておく必要があります。
コードの解説：処理のキーポイント
このJavaScriptコードの重要なポイントは、以下の2点です。
1. 切り替えポイントの高さを取得する
const switch_point = $('.js-switch_point').offset().top;.offset().topは、指定した要素（ここでは.js-switch_point）が、ページの最上部からどれだけ離れているかの距離（Y座標）を取得するメソッドです。この値が、スクロールイベントを発動させる「しきい値」となります。
2. スクロール量を監視し、クラスを切り替える
$(window).on("scroll", function() {
if ($(this).scrollTop() > switch_point) {
// ...
}
});
$(window).on("scroll", ...)で、ブラウザのスクロールイベントを監視します。
$(this).scrollTop()は、ユーザーが現在どれだけページを垂直にスクロールしたかの値を取得します。
if文を使って、「現在のスクロール量（scrollTop()）」が「取得しておいた切り替えポイントの高さ（switch_point）」を超えたかどうかを判定し、クラスの追加（addClass）と削除（removeClass）を行っています。
まとめ
今回は、jQueryのoffset().topとscrollTop()を利用して、特定の位置までスクロールしたらCSSクラスを変更する方法を解説しました。ヘッダーのスタイル変更だけでなく、スクロールに応じてアニメーションを発動させたり、特定のUIを表示させたりと、幅広く応用できるテクニックです。ぜひあなたのWebサイト制作に役立ててください。
よくある質問（FAQ）
Q. JavaScript（jQuery）を使わずに、CSSだけで似たようなことはできますか？
A. 要素を画面上部に固定するだけであれば、CSSのposition: sticky;を使用することで、JavaScriptなしで実装できる場合があります。ただし、この記事のように「特定の位置を通過したら別の要素のスタイルを変える」といった複雑な連動処理は、JavaScript（またはIntersection Observer API）を使用するのが一般的です。
Q. offset().top とは何ですか？
A. jQueryのメソッドの一つで、選択した要素の「ドキュメント（ページ全体）の左上端」を基準とした相対的なY座標（上からの距離）を取得します。似たメソッドにposition().topがありますが、こちらは親要素からの相対位置を取得する点で異なります。ページ全体のスクロール位置を基準にする場合はoffset().topが便利です。
Q. ヘッダー以外（例：サイドバー）にも応用できますか？
A. はい、もちろん可能です。コード内のconst fix_items = $('#header');で指定しているセレクタ（#header）を、スタイルを変更したい任意の要素（例：サイドバーのIDやクラス）に変更するだけで応用できます。同様に、切り替えの基準点（.js-switch_point）も、ページ内の任意の位置にある要素を指定できます。