スクロール時に上部に固定されるナビゲーション バーを作成するにはどうすればよいですか?

スクロール時に上部に接続する固定ナビゲーション バーの作成

問題:

表示されているページの下部に配置されるナビゲーション バーを設計する最初は。ユーザーが下にスクロールすると、ナビゲーション バーはページの上部に固定されるまで上昇します。

解決策:

この解決策には、jQuery と JavaScript を利用して、スクロール位置。

実装:

1. HTML:

   <div>

   ログイン後にコピー

2. CSS:

   #banner {
     height: 273px;
   }
   
   #nav_bar {
     height: 30px;
   }
   
   $(document).ready(function() {
     $(window).scroll(function () {
       if ($(window).scrollTop() > 550) {
         $('#nav_bar').addClass('navbar-fixed-top');
       }
       if ($(window).scrollTop() < 551) {
         $('#nav_bar').removeClass('navbar-fixed-top');
       }
     });
   });

   ログイン後にコピー

さらに注:

• ナビゲーション バーが固定する正確なスクロール位置に一致するように、JavaScript の値 (550 および 551) を調整します。
• この解決策は、次の要素に適用できます。特定のスクロール位置に固定しておく必要があります。

以上がスクロール時に上部に固定されるナビゲーション バーを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。