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

Posted 2023-03-31

【中文标题】如何使用 bootstrap 3 创建粘性左侧边栏菜单？

【英文标题】：How to create a sticky left sidebar menu using bootstrap 3?

【发布时间】：2013-10-30 12:11:21

【问题描述】：

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

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

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

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

---

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

【问题讨论】：

可能重复：***.com/questions/19099325/…

如果你“明白了”，你应该回答这个问题来帮助别人。

您可以从这些集合中找到一个粘性左侧边栏菜单designerslib.com/bootstrap-sidebar-menu-templates

【参考方案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。

相关：Create a responsive navbar sidebar "drawer" in Bootstrap 4?

【讨论】：

好吧，我参加聚会很晚了，但是正如您在 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 方法来达到“粘性栏”