twitter-bootstrap 滚动时修复侧边栏直到到达页脚（使用 Bootstrap 类）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34711340/
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
Fix a sidebar while scrolling until footer is reached (using Bootstrap classes)
提问by Gus
I'm trying to make a sidebar that will scroll with the page, and when its bottom reaches the page footer, it will stop scrolling and stay in place. Like it is explained here, and like in this fiddle.
我正在尝试制作一个随页面滚动的侧边栏，当它的底部到达页面页脚时，它将停止滚动并保持原位。就像这里解释的一样，就像在这个小提琴中一样。
The problem is, I'm using some Bootstrap 3, and I believe I can't achieve the same result because of some properties on its CSS. Instead of the sidebar staying at the bottom, it goes back up after it reaches the footer.
问题是，我正在使用一些 Bootstrap 3，并且我相信由于其 CSS 上的某些属性，我无法获得相同的结果。侧边栏不是停留在底部，而是在到达页脚后返回。
This is my layout structure.
这是我的布局结构。
<nav class="navbar"></nav>
<div class="container" id="wrapper">
<div class="row">
<div class="col-sm-8" id="blog-main"></div>
<div class="col-sm-4" id="blog-sidebar"></div>
</div>
</div>
<div id='blog-footer'></div>
Fiddle: https://jsfiddle.net/mpxrqwwf/7/
小提琴：https: //jsfiddle.net/mpxrqwwf/7/
I tried putting blog-sidebarinside a wrapper div, with position: absoluteon it and with position: relativeon the main wrapper, but it broke the layout and the scrolling still did not work as I expected. Thanks in advance for the help.
我尝试将blog-sidebar一个包装器 div放在里面，position: absolute在它上面和position: relative主包装器上，但它破坏了布局，滚动仍然没有像我预期的那样工作。在此先感谢您的帮助。
回答by DavidDomain
Bootstrap has a build in plugin to do that for you, just by adding a couple of data attributes.
Bootstrap 有一个内置插件可以为您完成这项工作，只需添加几个数据属性即可。
The affix plugin toggles position: fixed; on and off, emulating the effect found with position: sticky;.
词缀插件切换位置：固定；打开和关闭，模拟通过 position:sticky; 找到的效果。
You just have to define an offset-topand an offset-bottomvia the attributes on the element you want to be affixed. Based on your offset values the plugin will add and remove a couple of CSS classes when an offset is reached during scrolling. These classes can be styled to your needs.
您只需要通过要附加的元素上的属性定义一个偏移顶部和一个偏移底部。根据您的偏移值，当滚动期间达到偏移量时，插件将添加和删除几个 CSS 类。这些类可以根据您的需要进行样式设置。
Positioning via CSS
The affix plugin toggles between three classes, each representing a particular state: .affix, .affix-top, and .affix-bottom. You must provide the styles, with the exception of position: fixed; on .affix, for these classes yourself (independent of this plugin) to handle the actual positions
通过 CSS 定位
词缀插件在三个类之间切换，每个类代表一个特定的状态：.affix、.affix-top 和 .affix-bottom。您必须提供样式，位置除外：固定；在 .affix 上，这些类自己（独立于这个插件）来处理实际位置
If you want more flexibility you can call the affix plugin via javaScript.
如果您想要更大的灵活性，您可以通过 javaScript 调用词缀插件。
Here is your fiddleusing the affix plugin via data attributes:
这是您通过数据属性使用词缀插件的小提琴：
CSS
CSS
/** CSS relacionado à barra de navega??o **/
#my-nav {
position: fixed;
width: 100%;
background-color: black;
height: 40px !important;
min-height: 0px;
z-index: 9999;
margin-bottom: 0;
}
#wrapper {
width: 81.6%;
}
#blog-header {
color: black;
text-align: right;
margin-bottom: 20px;
}
#blog-main {
/*width: 68%;*/
height: 500px;
padding: 0;
margin-right: 5px;
background-color: orange;
}
#blog-sidebar {
background-color: purple;
/*width: 30.9%;*/
width: 222px;
height: 300px;
padding: 25px 0px 20px 0px;
}
.affix {
position: fixed;
top: 40px;
}
.affix-top {
position: static;
}
.affix-bottom {
position: absolute;
}
#blog-footer {
background-color: green;
height: 300px;
}
HTML
HTML
<nav class="navbar" id="my-nav"></nav>
<br /><br />
<div class="container" id="wrapper">
<div id="blog-header">
<h1>header</h1>
</div>
<div class="row">
<div class="col-sm-8">
<div id="blog-main"></div>
</div>
<div class="col-sm-4">
<div id="blog-sidebar" data-spy="affix" data-offset-top="80" data-offset-bottom="345"></div>
</div>
</div>
</div><!-- /.container -->
<div id='blog-footer'></div>
