jQuery 在 Bootstrap 3.0 中创建粘性侧导航栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18572313/
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
Create sticky side navbar in Bootstrap 3.0
提问by Swarup
I want to create Sticky Side Navbar on Left side in My Web Site. & I'm Using Bootstrap 3 RC2. I don't know How to create it.
我想在我的网站的左侧创建粘性侧导航栏。&我正在使用 Bootstrap 3 RC2。我不知道如何创建它。
回答by Zim
You need to define the CSS for when the sidebar becomes fixed...
您需要为侧边栏固定时定义 CSS...
For example,
例如，
#sidebar.affix {
position: fixed;
top:25px;
width:228px;
}
Here is a working example: http://bootply.com/73864
这是一个工作示例：http: //bootply.com/73864
回答by Jeremy Lynch
The sticky navbar you are refereing to is possible thanks to the affix plugin. You can view the bootstrap documentation on this.
由于词缀插件，您可以使用粘性导航栏。您可以查看有关此的引导程序文档。
This Jsfiddlecontains a working sticky sidebar (make the result window larger to see it work properly). Read on to create the same sidebar.
这个Jsfiddle包含一个有效的粘性侧边栏（使结果窗口更大以查看它是否正常工作）。继续阅读以创建相同的侧边栏。
1. Create html for your sidebar.For this example we will use bootstraps nav-pills within a well.
1. 为侧边栏创建 html。在这个例子中，我们将在井中使用 bootstraps 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. Invoke the affix plugin in your js file
2.调用js文件中的词缀插件
$('#sidebar').affix({
offset: {
top: $('header').height()
}
});
You need to replace 'header' with whatever will be above the the sidebar. If you are using a bootstrap navbar and it is directly above the sidebar, replace 'header' with the class you are using for the navbar, for example:
您需要用侧边栏上方的任何内容替换“标题”。如果您使用的是引导导航栏并且它位于侧边栏的正上方，请将 'header' 替换为您用于导航栏的类，例如：
top: $('.navbar navbar-default').height()
3. Add css for affix class
3.为词缀类添加css
CSS for non-responsive layout
用于无响应布局的 CSS
.bs-sidebar.affix {
width: 263px;
top: 25px;
}
CSS for responsive layout
响应式布局的 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;
}
}
回答by Bass Jobsen
The default Navbar of Twitter's Bootstrap 3 is horizontal. There are four types of it, default, static top and fixed top and bottom, see the example section of this page: http://getbootstrap.com/getting-started
Twitter 的 Bootstrap 3 的默认导航栏是水平的。它有四种类型，默认，静态顶部和固定顶部和底部，请参阅本页的示例部分：http: //getbootstrap.com/getting-started
But of course you can use Twitter's Bootstrap 3 to build a (left)side navigation. Please first read the Docs, it contain many examples. Make a sketch of you idea, try to code it with the examples. Ask questions here for troubleshooting of your code. Start at the affix (http://getbootstrap.com/javascript/#affix) and the nav section (http://getbootstrap.com/components/#nav) first maybe.
但是当然您可以使用 Twitter 的 Bootstrap 3 来构建（左侧）侧导航。请先阅读文档，它包含许多示例。为你的想法画一个草图，试着用例子来编码。在此处提问以对代码进行故障排除。可能首先从词缀 ( http://getbootstrap.com/javascript/#affix) 和导航部分 ( http://getbootstrap.com/components/#nav) 开始。
Maybe also check: how to make bootstrap off canvas nav overlap content instead of move it
也许还检查：如何使画布导航重叠内容引导而不是移动它
