【jQuery】特定の要素までスクロールしたらナビゲーションバーがハイライトされる

スクロールに追従するナビゲーションに「on」というクラスを追加および削除するためのjQueryコードです。
これにより、特定のクラスを持つ要素の範囲内にスクロールしたときに「on」クラスを追加し、その範囲外に出たら「on」クラスを削除します。

HTML

CSS

jQuery(script.js)

  1. HTML:
    • 固定されたナビゲーションバーと複数のセクションを持つコンテンツを作成します。
    • ターゲットとなるセクションにはクラスtargetを付けています。
  2. CSS:
    • ナビゲーションバーを固定し、デフォルトのスタイルを設定します。
    • nav.on クラスでナビゲーションバーの背景色を変更しています。
    • セクションのスタイルを設定しています。
  3. jQuery:
    • ページの読み込みが完了したら、ナビゲーションバーとターゲットセクションを選択します。
    • ウィンドウのスクロールイベントをリッスンし、スクロール位置とターゲットセクションの位置を比較します。
    • 現在のスクロール位置がターゲットセクション内にある場合、ナビゲーションバーにonクラスを追加します。それ以外の場合は、onクラスを削除します。

このコードを使用すると、ユーザーが特定の要素にスクロールしたときに、ナビゲーションバーがハイライトされるようになります。