如何使用Bootstrap实现滚动时固定在页面顶部的粘性导航栏

方法1：使用Bootstrap 3自带类实现（最简单，无需额外JS） #

你当前使用的是Bootstrap 3框架，本身已经提供了导航栏固定顶部的内置类，直接修改HTML的nav标签即可：

<nav class="navbar navbar-inverse navbar-fixed-top">

之后需要给body添加上内边距，避免导航栏脱离文档流后遮挡页面首屏内容，在你的CSS文件中加入：

body {
  padding-top: 80px; /* 数值可以根据你的导航栏实际高度调整 */
}

注意：你的现有CSS里navbar-toggle选择器遗漏了类选择符的.，正确写法是.navbar-toggle，否则对应的样式不会生效。

方法2：自定义CSS实现固定效果 #

如果不想用Bootstrap内置类，直接给导航栏添加固定定位样式即可，在你的CSS中加入：

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999; /* 确保导航栏层级最高，不会被其他页面元素遮挡 */
}
/* 同样需要给body添加上内边距避免内容被遮挡 */
body {
  padding-top: 80px;
}

方法3：滚动到指定位置后才固定导航栏的JS方案 #

如果你需要的是导航栏初始时不固定，页面向下滚动超过一定高度后才固定在顶部，可以用你已经引入的jQuery实现，代码如下：

$(function(){
  // 获取导航栏距离页面顶部的初始偏移量
  var navOffsetTop = $('.navbar').offset().top;
  // 监听页面滚动事件
  $(window).scroll(function(){
    var scrollTop = $(window).scrollTop();
    // 滚动高度超过导航栏初始位置时添加固定类，否则移除
    if(scrollTop >= navOffsetTop){
      $('.navbar').addClass('navbar-fixed-top');
      $('body').css('padding-top', $('.navbar').outerHeight());
    } else {
      $('.navbar').removeClass('navbar-fixed-top');
      $('body').css('padding-top', 0);
    }
  })
})

内容的提问来源于stack exchange，提问作者jedziemy