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

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

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scroll Navigation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav id="nav">ナビゲーション</nav>
    <div class="content">
        <section class="section">セクション1</section>
        <section class="section target">セクション2 (ターゲット)</section>
        <section class="section">セクション3</section>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Scroll Navigation</title>

</head>

<body>

<nav id="nav">ナビゲーション</nav>

<section class="section">セクション1</section>

<section class="section target">セクション2 (ターゲット)</section>

<section class="section">セクション3</section>

</div>

</body>

</html>

CSS

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

nav {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #333;
    color: #fff;
    padding: 10px;
    text-align: center;
    z-index: 1000;
    transition: background-color 0.3s ease;
}

nav.on {
    background-color: #f00;
}

.content {
    padding-top: 60px;
}

.section {
    height: 100vh;
    border-bottom: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
}

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

}

nav {

position: fixed;

top: 0;

width: 100%;

background-color: #333;

color: #fff;

padding: 10px;

text-align: center;

z-index: 1000;

transition: background-color 0.3s ease;

}

nav.on {

background-color: #f00;

}

.content {

padding-top: 60px;

}

.section {

height: 100vh;

border-bottom: 1px solid #ccc;

display: flex;

justify-content: center;

align-items: center;

font-size: 24px;

}

jQuery(script.js)

$(document).ready(function() {
    const $nav = $('#nav');
    const $target = $('.target');

    $(window).on('scroll', function() {
        const scrollTop = $(window).scrollTop();
        const targetTop = $target.offset().top;
        const targetBottom = targetTop + $target.outerHeight();

        if (scrollTop >= targetTop && scrollTop < targetBottom) {
            $nav.addClass('on');
        } else {
            $nav.removeClass('on');
        }
    });
});

$(document).ready(function() {

const $nav = $('#nav');

const $target = $('.target');

$(window).on('scroll', function() {

const scrollTop = $(window).scrollTop();

const targetTop = $target.offset().top;

const targetBottom = targetTop + $target.outerHeight();

if (scrollTop >= targetTop && scrollTop < targetBottom) {

$nav.addClass('on');

} else {

$nav.removeClass('on');

}

});

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

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

HTML

CSS

jQuery(script.js)

関連記事