33

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

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

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

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

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

4

3 回答 3

49

引导程序 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;
  }

编辑- 另一个带有页脚和 affix-bottom 的示例

引导程序 4

Affix 组件已在 Bootstrap 4 中删除，因此要创建粘性侧边栏，您可以使用像此Bootstrap 4 粘性侧边栏示例这样的3rd 方 Affix 插件，或使用此答案中解释的类。sticky-top

相关：在 Bootstrap 4 中创建响应式导航栏侧边栏“抽屉”？

于 2014-02-01T12:00:42.330 回答
6

你也可以尝试使用像Fixed-Sticky这样的 Polyfill 。特别是当您使用 Bootstrap4 时，不再包含affix该组件：

删除了 Affix jQuery 插件。我们建议使用 position:sticky polyfill 代替。

于 2016-02-08T16:52:07.013 回答
5

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

$(function(){
    $('.block').affix();
})
于 2014-01-31T07:59:24.547 回答