twitter-bootstrap 如何使用引导程序 3 创建粘性左侧边栏菜单？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19681895/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create a sticky left sidebar menu using bootstrap 3?
提问by Sohag-Monist It
I want to create a left-sticky bar menu with bootstrap 3 like:
我想创建一个带有引导程序 3 的左粘性栏菜单，例如：
http://getbootstrap.com/getting-started/
http://getbootstrap.com/getting-started/
I'd read the given documentation http://getbootstrap.com/javascript/#affix
我会阅读给定的文档http://getbootstrap.com/javascript/#affix
I try with .affixbut the result is zero.
我尝试，.affix但结果为零。
Update: @Skelly,
Thanks for your kind example. and yes, I want like your example. I'd download your example html, but after download the html file's side bar didn't work there.
更新：@Skelly，
谢谢你的好榜样。是的，我想要像你的例子。我会下载您的示例 html，但下载后 html 文件的侧栏在那里不起作用。
回答by Zim
Bootstrap 3
引导程序 3
Here is a working left sidebar example:
这是一个有效的左侧边栏示例：
http://bootply.com/90936(similar to the Bootstrap docs)
http://bootply.com/90936（类似于 Bootstrap 文档）
The trick is using the affixcomponent along with some CSS to position it:
诀窍是使用affix组件和一些 CSS 来定位它：
#sidebar.affix-top {
position: static;
margin-top:30px;
width:228px;
}
#sidebar.affix {
position: fixed;
top:70px;
width:228px;
}
EDIT- Another example with footer and affix-bottom
编辑- 另一个带有页脚和词缀底部的例子
Bootstrap 4
引导程序 4
The Affix component has been removed in Bootstrap 4, so to create a sticky sidebar, you can use a 3rd party Affix pluginlike this Bootstrap 4 sticky sidebar example, or use the sticky-topclassis explained in this answer.
词缀分量在引导4被删除，所以要创建一个棘手的侧边栏，你可以使用一个第三方插件缀这样引导4粘边栏例子，或使用sticky-top类是在这个答案解释。
Related: Create a responsive navbar sidebar "drawer" in Bootstrap 4?
回答by H6.
You can also try to use a Polyfill like Fixed-Sticky. Especially when you are using Bootstrap4 the affixcomponent is no longer included:
你也可以尝试使用像Fixed-Sticky这样的 Polyfill 。特别是当您使用 Bootstrap4 时，不再包含该affix组件：
Dropped the Affix jQuery plugin. We recommend using a position: sticky polyfill instead.
删除了 Affix jQuery 插件。我们建议使用 position:sticky polyfill 代替。
回答by Evgeniy
I used this way in my code
我在我的代码中使用了这种方式
$(function(){
$('.block').affix();
})
