如何使用 bootstrap 3 创建粘性左侧边栏菜单？答案

【问题标题】：How to create a sticky left sidebar menu using bootstrap 3?如何使用 bootstrap 3 创建粘性左侧边栏菜单？
【发布时间】：2013-10-30 12:11:21
【问题描述】：

我想用 bootstrap 3 创建一个左粘性栏菜单，例如：

http://getbootstrap.com/getting-started/

我会阅读给定的文档http://getbootstrap.com/javascript/#affix

我尝试使用.affix，但结果为零。

更新：@Skelly，
谢谢你的好榜样。是的，我想要你的例子。我会下载你的示例 html，但下载后 html 文件的侧栏在那里不起作用。

【问题讨论】：

可能重复：stackoverflow.com/questions/19099325/…
如果你“明白了”，你应该回答这个问题来帮助别人。
您可以从这些集合中找到一个粘性左侧边栏菜单designerslib.com/bootstrap-sidebar-menu-templates

标签： twitter-bootstrap twitter-bootstrap-3 sidebar sticky

【解决方案1】：

引导程序 3

这是一个有效的左侧边栏示例：

http://bootply.com/90936（类似于 Bootstrap 文档）

诀窍是使用 affix 组件和一些 CSS 来定位它：

  #sidebar.affix-top {
    position: static;
    margin-top:30px;
    width:228px;
  }

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

编辑-另一个example with footer and affix-bottom

引导程序 4

Affix 组件已在 Bootstrap 4 中移除，因此要创建粘性侧边栏，您可以使用像 Bootstrap 4 sticky sidebar example 这样的 3rd 方 Affix 插件，或使用 sticky-top类是explained in this answer。

【讨论】：

好吧，我参加聚会很晚了，但是正如您在 bootply 上的示例所暗示的那样，如果您已经看到，一旦您单击第 2 部分，标题就会被顶部导航栏隐藏。我也遇到了同样的问题，你能帮我解决一下吗？
在锚点 (h2) #mainCol h2 {padding-top: 55px; margin-top: -55px;} codeply.com/go/chA684SPpu

【解决方案2】：

您也可以尝试使用像 Fixed-Sticky 这样的 Polyfill。特别是当您使用 Bootstrap4 时，affix 组件是no longer included：

删除了 Affix jQuery 插件。我们建议使用位置：sticky polyfill 代替。

【讨论】：

根据您提供的链接，该插件现已弃用。

【解决方案3】：

我在我的代码中使用了这种方式

$(function(){
    $('.block').affix();
})

【讨论】：

在没有必要的地方使用 javascript/jquery 是一个糟糕的主意，但可以通过 CSS 解决。
@WadeShuler，没有 JS 就无法解决它，因为您必须根据页面滚动切换 .fixed 类
我在午夜时分浏览了页面。这个问题的标题是关于一个粘性侧边栏，它可以在没有任何 JS 的情况下使用 CSS 完成。他链接到一个关于词缀是的消息来源。所以这取决于他是否想要词缀的作用，或者他真的只是想要一个固定在页面侧面的侧边栏。如果他不想/不需要词缀的好处并且纯 CSS 选项可以完成这项工作，那么他不需要使用任何额外的和不必要的 JS。我坚信保持源头清洁。我没有加载任何我不需要的脚本，也没有任何我不需要的代码。
@WadeShuler，绝对同意你的观点，不要在 CSS 任务中使用 JS。但是affix，bootstrap affix，不仅仅是一个固定的侧边栏，需要和DOM交互，你知道没有JS是解决不了的。我们无法确定作者到底想要达到什么目的，所以我发布了记录在案的 API 方法来达到“粘性栏”