我正在寻找同样的东西。我读过这在 Bootstrap 3.0 中可用，但我没有真正实现它。这是我想出来的，效果很好。非常简单的 jQuery 和 Javascript。

这是 JSFiddle 玩... http://jsfiddle.net/CriddleCraddle/Wj9dD/

该解决方案与网络和 StackOverflow 上的其他解决方案非常相似。如果您觉得这个没有用，请搜索您需要的内容。祝你好运！

这是 HTML...

<div id="banner">
  <h2>put what you want here</h2>
  <p>just adjust javascript size to match this window</p>
</div>

  <nav id='nav_bar'>
    <ul class='nav_links'>
      <li><a href="url">Sign In</a></li>
      <li><a href="url">Blog</a></li>
      <li><a href="url">About</a></li>
    </ul>
  </nav>

<div id='body_div'>
  <p style='margin: 0; padding-top: 50px;'>and more stuff to continue scrolling here</p>
</div>

这是CSS...

html, body {
  height: 4000px;
}

.navbar-fixed {
  top: 0;
  z-index: 100;
  position: fixed;
  width: 100%;
}

#body_div {
  top: 0;
  position: relative;
  height: 200px;
  background-color: green;
}

#banner {
  width: 100%;
  height: 273px;
  background-color: gray;
  overflow: hidden;
}

#nav_bar {
  border: 0;
  background-color: #202020;
  border-radius: 0px;
  margin-bottom: 0;
  height: 30px;
}

//the below css are for the links, not needed for sticky nav
.nav_links {
  margin: 0;
}

.nav_links li {
  display: inline-block;
  margin-top: 4px;
}

.nav_links li a {
  padding: 0 15.5px;
  color: #3498db;
  text-decoration: none;
}

现在，只需添加 javacript 即可根据滚动位置添加和删除修复类。

$(document).ready(function() {
  //change the integers below to match the height of your upper div, which I called
  //banner.  Just add a 1 to the last number.  console.log($(window).scrollTop())
  //to figure out what the scroll position is when exactly you want to fix the nav
  //bar or div or whatever.  I stuck in the console.log for you.  Just remove when
  //you know the position.
  $(window).scroll(function () { 

    console.log($(window).scrollTop());

    if ($(window).scrollTop() > 550) {
      $('#nav_bar').addClass('navbar-fixed-top');
    }

    if ($(window).scrollTop() < 551) {
      $('#nav_bar').removeClass('navbar-fixed-top');
    }
  });
});

注意（2015）：下面的问题和答案都适用于旧的、已弃用的 Twitter Bootstrap 2.x 版本。

这种制作和元素“粘性”的功能内置于 Twitter 的 Bootstrap 中，它被称为Affix。您所要做的就是添加：

<div data-spy="affix" data-offset-top="121">
  ... your navbar ...
</div>

在你的标签周围，不要忘记按照手册中的描述加载 Bootstrap 的 JS 文件。数据属性offset-top告诉页面滚动（从顶部）多少像素来修复你的菜单组件。通常它只是页面顶部的空间。

注意：当菜单被修复时，您必须处理丢失的空间。修复意味着将其从您的页面层中切除并粘贴到不滚动的不同层中。我正在做以下事情：

<div style="height: 77px;">
  <div data-spy="affix" data-offset-top="121">
    <div style="position: relative; height: 0; width: 100%;">
      <div style="position: absolute; top: 0; left: 0;">
        ... my menu ...
      </div>
    </div>
  </div>
</div>

77px我的附加组件的高度在哪里。

//在html中

<nav class="navbar navbar-default" id="mainnav">
<nav>

// 在 jquery 中添加

$(document).ready(function() {
  var navpos = $('#mainnav').offset();
  console.log(navpos.top);
    $(window).bind('scroll', function() {
      if ($(window).scrollTop() > navpos.top) {
       $('#mainnav').addClass('navbar-fixed-top');
       }
       else {
         $('#mainnav').removeClass('navbar-fixed-top');
       }
    });
});

这是 jsfiddle 玩： - http://jsfiddle.net/shubhampatwa/46ovg69z/

编辑：如果您只想将此代码应用于移动设备，您可以使用：

   var newWindowWidth = $(window).width();
    if (newWindowWidth < 481) {
        //Place code inside it...
       }

Bootstrap 4 - 2020 年更新

Bootstrap 4 中不再存在 Affix 插件，但现在大多数浏览器都支持position:sticky它可用于创建 scoll Navbar 后的粘性。Bootstrap 4 包括这个sticky-top类......

https://codeply.com/go/oY2CyNiA7A

Bootstrap 3 - 原始答案

这是一个不需要额外 jQuery 的 Bootstrap 3 示例..它使用AffixBootstrap 3 中包含的插件，但自 BS2 以来导航栏标记发生了变化......

<!-- Content Above Nav -->
<header class="masthead">

</header>           


<!-- Begin Navbar -->
<div id="nav">
  <div class="navbar navbar-default navbar-static">
    <div class="container">
      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="glyphicon glyphicon-bar"></span>
        <span class="glyphicon glyphicon-bar"></span>
        <span class="glyphicon glyphicon-bar"></span>
      </a>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li class="divider"></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
        <ul class="nav pull-right navbar-nav">
          <li>
            ..
          </li>
          <li>
            ..
          </li>
        </ul>
      </div>        
    </div>
  </div><!-- /.navbar -->
</div>

工作演示/模板：http : //bootply.com/69848

这对我很有用。不要忘记在导航栏曾经所在的位置放置一个填充 div，否则每次固定/未固定时内容都会跳转。

function setSkrollr(){
    var objDistance = $navbar.offset().top;
    $(window).scroll(function() {
        var myDistance = $(window).scrollTop();
        if (myDistance > objDistance){
            $navbar.addClass('navbar-fixed-top');
        }
        if (objDistance > myDistance){
            $navbar.removeClass('navbar-fixed-top');
        }
    });
}