如何使用 CSS 位置粘性保持侧边栏在 Bootstrap 4 中可见
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38382043/
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 use CSS position sticky to keep a sidebar visible with Bootstrap 4
提问by marcanuy
I have a two columns layout like this:
我有一个像这样的两列布局：
<div class="row">
<div class="col-xs-8 content">
</div>
<div class="col-xs-4">
</div>
</div>
If I set the position:stickyto the sidebar column, I get the sticky behaviour of the sidebar: https://codepen.io/marcanuy/pen/YWYZEp
如果我将 设置position:sticky为侧边栏列，我会得到侧边栏的粘性行为：https: //codepen.io/marcanuy/pen/YWYZEp
CSS:
CSS：
.sticky {
position: sticky;
top: 10px;
}
HTML:
HTML：
<div class="row">
<div class="col-xs-8 content">
</div>
<div class="col-xs-4 sticky">
</div>
</div>
But when I set the stickyproperty onlyto the menuthat is located in the sidebar, so the related articlessection scrolls normally and gets the stickybehaviour with the menu div, it doesn't work:
但是当我仅将sticky属性设置为位于侧边栏中的菜单时，因此相关文章部分正常滚动并使用菜单 div获取粘性行为，它不起作用：
<div class="row">
<div class="col-xs-8 content">
</div>
<div class="col-xs-4">
<div class="menu sticky">
</div>
</div>
</div>
This is the screencast of the first example scrolling the whole sidebar with a sticky behaviour, and then changing the sticky property to the menu that doesn't work:
这是第一个示例的截屏视频，使用粘性行为滚动整个侧边栏，然后将粘性属性更改为不起作用的菜单：
Bootstrap 4 recommendsthe stickyproperty as the dropped support for the Affix jQuery plugin:
Bootstrap 4推荐使用sticky属性作为对 Affix jQuery 插件的支持：
Dropped the Affix jQuery plugin. We recommend using a position: sticky polyfill instead.
删除了 Affix jQuery 插件。我们建议使用 position:sticky polyfill 代替。
I have tested it in:
我已经在以下方面进行了测试：
Firefox 47.0 with
css.sticky.enabled=“true”underabout:configChrome 50.0.2661.94 (64-bit) with
experimental Web Platform featuresenabled inchrome://flags
Firefox 47.0
css.sticky.enabled=“true”下about:configChrome 50.0.2661.94（64 位）已
experimental Web Platform features启用chrome://flags
(This is not a duplicate of How to make a sticky sidebar in Bootstrap?because that one is using BS affix)
（这不是如何在 Bootstrap 中制作粘性侧边栏的副本？因为那个使用的是 BS 词缀）
采纳答案by marcanuy
I solved enabling flexbox. After raising an issue in Bootstrap's Githubrepository I got an answer by a Bootstrap member:
我解决了启用flexbox. 在 Bootstrap 的Github存储库中提出问题后，我得到了 Bootstrap成员的回答：
The .col-xs-4 isn't as tall as the .col-xs-8, so there's basically no space for the Menu to "float" within when the stickiness kicks in. Make the .col-xs-4 taller and things work fine: https://codepen.io/anon/pen/OXzoNJIf you enable the Flexbox version of our grid system (via $enable-flex: true;), you get automatic equal-height columns for free, which comes in handy in your case.
.col-xs-4 没有 .col-xs-8 高，所以当粘性开始时，菜单基本上没有空间“浮动”。使 .col-xs-4 更高，并且一切正常：https: //codepen.io/anon/pen/OXzoNJ 如果您启用了我们网格系统的 Flexbox 版本（通过 $enable-flex: true;），您将免费获得自动等高列，它来了在你的情况下派上用场。
回答by Zim
In the stable Bootstrap 4.0.0release, this is done using the sticky-topclass...
在稳定的Bootstrap 4.0.0版本中，这是使用sticky-top类完成的...
<div class="container">
<nav class="navbar navbar-light bg-light navbar-expand">
<a class="navbar-brand" href="#">Header</a>
...
</nav>
<div class="row">
<div class="col-8 content">
Content
</div>
<div class="col-4">
<div class="sticky-top">
<h4>Sticky menu</h4>
...
</div>
</div>
</div>
<div class="footer">
...
</div>
</div>
This works even in the height of the header/navbar, content, and footer are dynamic/unknown.
即使在页眉/导航栏、内容和页脚是动态/未知的高度，这也有效。
回答by eklundkristoffer
The answer by @wrldbt works up to bootstrap 4 alpha 5, but in alpha 6 the -xsinfix has been dropped and the grid have been rewritten.
@wrldbt 的答案适用于 bootstrap 4 alpha 5，但在 alpha 6 中，中-xs缀已被删除，网格已被重写。
I put something together, a bit cleaner, working with current version of bootstrap & also included a sticky footer using flexbox.
我把一些东西放在一起，更干净一点，使用当前版本的引导程序，还包括一个使用 flexbox 的粘性页脚。
回答by wrldbt
You need to include the JS polyfill in order to use it. The polyfills recommended by the link on the Bootstrap page are
您需要包含 JS polyfill 才能使用它。Bootstrap 页面上的链接推荐的 polyfills 是
Here is an updated codepen: https://codepen.io/anon/pen/zBpNRk
这是一个更新的代码笔：https://codepen.io/anon/pen/zBpNRk
I included the required polyfill (I used stickyfill) and called it with
我包含了所需的 polyfill（我使用了stickyfill）并用
var stickyElements = document.getElementsByClassName('sticky');
for (var i = stickyElements.length - 1; i >= 0; i--) {
Stickyfill.add(stickyElements[i]);
}
The library suggested you use this for your css
该库建议您将其用于 css
.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}
.sticky:before,
.sticky:after {
content: '';
display: table;
}
and finally you had the divorder mixed up. You need to put the divwith the sticky class outside of an entire row so I filled up the rest of the row with another <div class="col-xs-6"></div>that is empty.
最后你把div订单搞混了。您需要将divwith 粘性类放在整行之外，因此我用另一个<div class="col-xs-6"></div>空的行填充了该行的其余部分。
