JS は Web ページナビゲーションバーの特殊効果を実現します

この記事では、ネイティブ JS を使用して実装された実用的な Web ナビゲーションバー効果を紹介します。ページをスクロールすると、ナビゲーションバーが変化します。効果は次のとおりです。

以下はコード実装です。コピーして貼り付け、収集していただいて結構です。

<!DOCTYPE html>
<html lang="ja">
 
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>Web ナビゲーション バーの特殊効果を実現するネイティブ JS</title>
    <スタイル>
        * {
            マージン: 0;
            パディング: 0;
            ボックスのサイズ: 境界線ボックス;
            単語折り返し: 単語を区切る;
            フォント ファミリ: 'Microsoft YaHei'、サンセリフ;
        }
 
        体 {
            背景: #000;
            最小高さ: 200vh;
        }
 
        ヘッダー {
            位置: 固定;
            上: 0;
            左: 0;
            幅: 100%;
            ディスプレイ: フレックス;
            アイテムの位置を中央揃えにします。
            コンテンツの両端揃え: スペースの間;
            遷移: 0.6 秒;
            パディング: 40px 100px;
            zインデックス: 2;
        }
 
        ヘッダー.sticky {
            パディング: 5px 100px;
            背景: #fff;
        }
 
        ヘッダー.logo {
            位置: 相対的;
            フォントの太さ: 700;
            色: #fff;
            テキスト装飾: なし;
            フォントサイズ: 2em;
            テキスト変換:大文字;
            文字間隔: 2px;
            遷移: 0;
        }
 
        ヘッダー ul {
            位置: 相対的;
            ディスプレイ: フレックス;
            コンテンツの中央揃え: 中央;
            アイテムの位置を中央揃えにします。
        }
 
        ヘッダー ul li {
            位置: 相対的;
            リストスタイル: なし;
        }
 
        ヘッダー ul li a {
            位置: 相対的;
            マージン: 0 15px;
            テキスト装飾: なし;
            色: #fff;
            文字間隔: 2px;
            フォントの太さ: 500px;
            遷移: 0.5秒;
        }
 
 
        .バナー{
            位置: 相対的;
            幅: 100%;
            高さ：100vh;
            背景: url(bg.jpg);
            背景サイズ: カバー;
        }
 
        ヘッダー.sticky.logo、
        ヘッダー.sticky ul li a {
            色: #000;
        }
    </スタイル>
</head>
 
<本文>
    <ヘッダー>
        <a href="#" class="logo">ロゴ</a>
        <ul>
            <li><a href="#" >ホーム</a></li>
            <li><a href="#" >概要</a></li>
            <li><a href="#" >サービス</a></li>
            <li><a href="#" >作品</a></li>
            <li><a href="#" >お問い合わせ</a></li>
        </ul>
    </ヘッダー>
    <section class="banner"></section>
    <スクリプト>
        window.addEventListener('スクロール', () => {
            ヘッダーを document.querySelector('header') とします。
            // 重要なプロパティ header.classList.toggle('sticky', window.scrollY > 0)
        })
    </スクリプト>
</本文>
 
</html>

以下はコードで参照されている画像bg.jpgです。