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

上部に固定されるスクロール ナビゲーション バーの作成

固定ナビゲーション バー

最初に表示されるナビゲーション バーを作成することを目指しています。ページの下部。下にスクロールすると、バーがページの上部に到達するまで移動し、そこに留まります。これは、それぞれ navbar-fixed-bottom クラスと navbar-fixed-top クラスを使用して実現されます。

コードの問題を解決する

提供されたコードを調べると、次のことがわかります。

• navbar-fixed-top クラスの正しい使用方法
• 適切なシャドウ削除

ただし、バーを希望どおりに動作させるには、次のことが必要です:

• 最初にページの下部に表示されるように <div> の配置を調整します。
• <div> の上または下に大きなマージンを追加して押し込みますdown

次の変更されたコードを検討してください:

洗練された HTML

<div>

変更された CSS

.navbar-fixed-top {
    top: 0;
    z-index: 100;
    position: fixed;
    width: 100%;
    margin-top: 800px; /* Add a sufficient margin-top to adjust the navigation bar's initial position */
}

代替ソリューション

Bootstrap の組み込みナビゲーション バーの動作が異なる場合必要に応じて、より単純な jQuery または JavaScript の実装に切り替えることができます。

HTML コード

   <div>

CSS コード

/* Initially, the nav bar is absolute, positioned at the bottom */
#nav_bar {
    position: absolute;
    bottom: 0;
}

/* When the #content is scrolled 40px, the navbar changes to fixed */
#content {
    height: 3000px;  /* Increase this to match your page content length */
    scroll: auto;
}

@media screen and (max-width: 480px) {
    #content {
        height: 8000px;
    }
}

/* This makes the navbar fixed positioned at the top, until the content is fully scrolled */
.fixed-nav {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
}

JavaScript コード

$(window).scroll(function(){
    if ($(window).scrollTop() > 40) {
        $("#nav_bar").addClass("fixed-nav");
     } else {
         $("#nav_bar").removeClass("fixed-nav");
     }
 });
以上が上部に固定されるスクロール ナビゲーション バーを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。