在 Bootstrap 3.0 中创建粘性侧导航栏答案

【问题标题】：Create sticky side navbar in Bootstrap 3.0在 Bootstrap 3.0 中创建粘性侧导航栏
【发布时间】：2014-05-13 03:55:28
【问题描述】：

我想在“我的网站”的左侧创建粘滞侧导航栏。 & 我正在使用 Bootstrap 3 RC2。我不知道如何创建它。

【问题讨论】：

到目前为止你试过了吗？？

标签： jquery twitter-bootstrap-3

【解决方案1】：

您需要定义侧边栏何时变为固定的 CSS...

例如，

#sidebar.affix {
    position: fixed;
    top:25px;
    width:228px;
  }

这是一个工作示例：http://bootply.com/73864

【讨论】：

【解决方案2】：

由于词缀插件，您所引用的粘性导航栏是可能的。你可以view the bootstrap documentation on this。

此Jsfiddle 包含一个有效的粘性侧边栏（将结果窗口放大以查看它是否正常工作）。继续阅读以创建相同的侧边栏。

1.为您的侧边栏创建 html。 对于此示例，我们将在井中使用引导程序 nav-pills。

<div class="row">
  <div class="col-sm-3">
    <div class="well bs-sidebar affix" id="sidebar">
      <ul class="nav nav-pills nav-stacked">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
      </ul>
    </div> <!--well bs-sidebar affix-->
  </div> <!--col-sm-3-->
  <div class="col-sm-9">
    <p>Main body content goes here</p>
  </div> <!--col-sm-9-->
</div> <!--row-->

2.在你的js文件中调用affix插件

$('#sidebar').affix({
  offset: {
    top: $('header').height()
  }
});

您需要将“标题”替换为侧边栏上方的任何内容。如果您使用的是引导导航栏并且它位于侧边栏的正上方，请将“header”替换为您用于导航栏的类，例如：

top: $('.navbar navbar-default').height()

3.为词缀类添加css

非响应式布局的 CSS

.bs-sidebar.affix {
  width: 263px;
  top: 25px;
}

用于响应式布局的 CSS

@media (min-width: 768px) {
  .bs-sidebar.affix {
    width: 158px;
    top: 25px;
  }
}

@media (min-width: 992px) {
  .bs-sidebar.affix {
    width: 213px;
    position: fixed;
    top: 25px;
  }
}

@media (min-width: 1200px) {
  .bs-sidebar.affix {
    width: 263px;
  }
}

【讨论】：

【解决方案3】：

Twitter 的 Bootstrap 3 的默认导航栏是水平的。它有四种类型，默认、静态顶部和固定顶部和底部，参见本页示例部分：http://getbootstrap.com/getting-started

当然，您可以使用 Twitter 的 Bootstrap 3 来构建（左侧）侧导航。请先阅读文档，其中包含许多示例。画出你的想法草图，尝试用示例对其进行编码。在此处提出问题以对代码进行故障排除。可能先从词缀 (http://getbootstrap.com/javascript/#affix) 和导航部分 (http://getbootstrap.com/components/#nav) 开始。

也许还要检查：how to make bootstrap off canvas nav overlap content instead of move it

【讨论】：