制作一個粘在頂部的滾動導航欄

粘性導航欄

您的目標是創(chuàng)建一個最初出現在的導航欄頁面底部。當您向下滾動時，該欄會一直移動，直到到達頁面頂部并保持在那里。這是分別使用 navbar-fixed-bottom 和 navbar-fixed-top 類來實現的。

解決您的代碼問題

檢查您提供的代碼會發(fā)現以下內容：

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

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

• 調整 <div> 的位置以最初顯示在頁面底部
• 在<div>上添加一個大的margin-top或bottom來推動它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");
       }
   });