HTML+CSS+JSはナビゲーションバーのスクロールグラデーション効果を実現します

まず効果を見てみましょう:

ここに画像の説明を挿入

成し遂げる：

1. ナビゲーションバーのテキストラベルを定義します。

<div class="tou">
        <sapn class="logo"> オーロラ。 </sapn>
        <ul class="biao">
        <li><a href="#"><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>
    </div>

2. ナビゲーションバーの全体的なスタイル:

.tou{
             位置: 固定;
             上: 0;
             左: 0;
             パディング: 25px 100px;
             幅: 100%;
             ディスプレイ: フレックス;
             コンテンツの両端揃え: スペースの間;
             アイテムの位置を中央揃えにします。
            遷移: 0.5秒;
         }

遷移
3. ノーザンライツのロゴのスタイル:

 。ロゴ{
             位置: 相対的;
             フォントサイズ: 22px;
             フォントの太さ: 900;
             文字間隔: 1px;
             色: rgb(28, 36, 148);
         }

letter-spacing: テキスト（文字）間隔

4. Northern Lights ロゴのテキストの左側に画像を配置します。

.logo::before{
            コンテンツ： '';
            位置: 絶対;
            左: -50px;
            上: -15px;
            幅: 50px;
            高さ: 50px;
            背景画像: url(logo.png);
            背景サイズ: 100%;
         }

5. 右側のナビゲーションラベルの一部のスタイルについては詳しく説明しません。結局のところ、スタイルは人それぞれ異なるからです。

.biao{
             位置: 相対的;
             ディスプレイ: フレックス;
             コンテンツの中央揃え: 中央;
             コンテンツの位置を中央揃えにします。
            リストスタイル: なし;
            
         }
        .ビアオ・リー{
             位置: 相対的;
         }
        .biao a{
             位置: 相対的;
             マージン: 0 10px;
             フォントサイズ: 18px;
             フォントファミリー: 'fangsong';
             フォントの太さ: 太字;
             色: rgb(28, 36, 148);
             テキスト装飾: なし;

         }

6. ページをスクロールすると、ナビゲーションバーのスタイル、パディングが小さくなり、フォントの色が変わり、青い背景色が表示されます。

 .bian{
            パディング: 15px 100px;
            背景色: rgb(71, 105, 219);
        }
        .bian .logo,.tou.bian a{
            色: rgb(252, 247, 247);
        }

7. シンプルなjs、実装部分:
最初のもの:

window.addEventListener('スクロール',function(){
            tou = document.querySelector('.tou'); とします。
           ウィンドウのスクロールYが0の場合
            {
                tou.classList.add("bian");
            }それ以外{
                tou.classList.remove("bian");
            }
        })

2 番目の方法: 直接次のようにします。

window.addEventListener('スクロール',function(){
            tou = document.querySelector('.tou'); とします。    
            tou.classList.toggle("bian",window.scrollY>0);

        })

説明する：
scrollYプロパティ:
Window インターフェイスの読み取り専用 scrollY プロパティは、ドキュメントが現在垂直方向にスクロールされているピクセル数を返します。

classList属性:
add(class1, class2, …) は、要素に 1 つ以上のクラス名を追加します。指定されたクラス名がすでに存在する場合は追加されません。
remove(class1, class2, …) 要素から 1 つ以上のクラス名を削除します。
Toggle(class, true|false)最初のパラメータは、既に存在する場合に削除するクラス名であり、false を返します。クラス名が存在しない場合は、要素に追加され、true が返されます。 2 番目はオプションのパラメータで、クラス名が存在するかどうかに関係なく、要素にクラスを強制的に追加するか削除するかを設定するために使用されるブール値です。

それで：
最初の js の記述方法は、スクロールが 0 より大きい場合にグラデーション効果を実現するために .biao クラスを追加し、スクロールが 0 より小さい場合に .biao クラスを削除して元の状態に戻すことです。
2 つ目はブール値の判定です。スクロールが 0 より大きい場合は .biao クラスが強制的に追加され、スクロールが 0 より小さい場合は .biao クラスが削除されます。

完全なコード:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <スタイル>
        *{
            マージン: 0;
            パディング: 0;
            ボックスのサイズ: 境界線ボックス;
            
        }
        体{
            高さ：200vh;
            
        }
        .tou{
             位置: 固定;
             上: 0;
             左: 0;
             パディング: 25px 100px;
             幅: 100%;
             ディスプレイ: フレックス;
             コンテンツの両端揃え: スペースの間;
             アイテムの位置を中央揃えにします。
            遷移: 0.5秒;
         }
        。ロゴ{
             位置: 相対的;
             フォントサイズ: 22px;
             フォントの太さ: 900;
             文字間隔: 1px;
             色: rgb(28, 36, 148);
         }
         .logo::before{
            コンテンツ： '';
            位置: 絶対;
            左: -50px;
            上: -15px;
            幅: 50px;
            高さ: 50px;
            背景画像: url(logo.png);
            背景サイズ: 100%;
         }
         .biao{
             位置: 相対的;
             ディスプレイ: フレックス;
             コンテンツの中央揃え: 中央;
             コンテンツの位置を中央揃えにします。
            リストスタイル: なし;
            
         }
        .ビアオ・リー{
             位置: 相対的;
         }
        .biao a{
             位置: 相対的;
             マージン: 0 10px;
             フォントサイズ: 18px;
             フォントファミリー: 'fangsong';
             フォントの太さ: 太字;
             色: rgb(28, 36, 148);
             テキスト装飾: なし;

         }
          
        .bian{
            パディング: 15px 100px;
            背景色: rgb(71, 105, 219);
        }
        .bian .logo,.tou.bian a{
            色: rgb(252, 247, 247);
        }
       /* 背景画像のスタイル */
        .bjimg{
      位置: 固定;
      上: 0;
      左: 0;
      幅: 100%;
      高さ: 100%;
      最小幅: 1000px;
      Zインデックス: -10;
      ズーム: 1;
      背景色: #fff;
      背景画像: url(11.jpg) ;
      背景繰り返し: 繰り返しなし;
      背景サイズ: カバー;
      -webkit-background-size: カバー;
      -o-background-size: カバー;
      背景位置: 中央 0;
    }

    </スタイル>
</head>
<本文>
    <!-- 背景画像 -->
    <div class="bjimg"></div>

   <!-- ナビゲーション バー -->
    <div class="tou">
        <sapn class="logo"> オーロラ。 </sapn>
        <ul class="biao">
        <li><a href="#"><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>
    </div>
    <スクリプト>
        window.addEventListener('スクロール',function(){
            tou = document.querySelector('.tou'); とします。
            
           
           /* tou.classList.toggle("bian",window.scrollY>0); */
           ウィンドウのスクロールYが0の場合
            {
                tou.classList.add("bian");
            }それ以外{
                tou.classList.remove("bian");
            }
        })
    </スクリプト>
</本文>
</html>

要約:

html+css+js を使用してナビゲーションバーのスクロールグラデーション効果を実現する方法についての記事はこれで終わりです。関連する html+css+js ナビゲーションバーのスクロールグラデーションコンテンツの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

<<: CSSで検索ボックスを非表示にする機能を実装します（アニメーション順方向と逆方向のシーケンス）

>>: CSS で 2 列レイアウトを実現する N 通りの方法