如何建立黏在頂部的滾動導覽列？

製作一個黏在頂部的捲動導覽列

黏性導覽列

您的目標是建立一個最初出現在的導覽列頁底部。當您向下捲動時，該欄會一直移動，直到到達頁面頂部並保持在那裡。這是分別使用 navbar-fixed-bottom 和 navbar-fixed-top 類別來實現的。

解決您的程式碼問題

檢查您提供的程式碼會發現以下內容：

• 正確的 navbar-fixed-top類別用法
• 適當的陰影刪除

但是，要使欄按預期運行，您需要：

• 調整
  的位置以最初顯示在頁面底部
• 在
  上添加一個大的margin-top或bottom來推動它down

  考慮以下修改後的代碼：

  改良的HTML

  <div>
  <h3 id="修改的CSS">修改的CSS</h3>
  <pre class="brush:php;toolbar:false">.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>
  <h3 id="CSS程式碼">CSS程式碼</h3>
  <pre class="brush:php;toolbar:false">/* 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");
       }
   });