如何创建粘在顶部的滚动导航栏？

制作一个粘在顶部的滚动导航栏

粘性导航栏

您的目标是创建一个最初出现在的导航栏页面底部。当您向下滚动时，该栏会一直移动，直到到达页面顶部并保持在那里。这是分别使用 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");
       }
   });