如何使用 CSS position sticky 来保持侧边栏可见 Bootstrap 4

Question

我有这样的两列布局：

 <div class="row">
    <div class="col-xs-8 content"> 
    </div>
    <div class="col-xs-4">
    </div>
 </div>

如果我将 position:sticky 设置为侧边栏列，我会得到侧边栏的粘性行为：https://codepen.io/marcanuy/pen/YWYZEp

CSS:

.sticky {
  position: sticky;
  top: 10px;
}

HTML:

 <div class="row">
    <div class="col-xs-8 content"> 
    </div>
    <div class="col-xs-4 sticky">
    </div>
 </div>

但是当我将sticky 属性仅设置为位于侧边栏的菜单时，因此 related articles 部分会正常滚动，并通过 menu div[=62= 获得 sticky 行为], 无效:

<div class="row"> <div class="col-xs-8 content"> </div> <div class="col-xs-4"> <div class="menu sticky"> </div> </div> </div>

这是第一个示例的截屏视频，它使用粘性行为滚动整个侧边栏，然后将粘性属性更改为不起作用的菜单：

Bootstrap 4 recommends sticky 属性作为对 Affix jQuery 插件的放弃支持：

Dropped the Affix jQuery plugin. We recommend using a position: sticky polyfill instead.

我测试过：

Firefox 47.0 css.sticky.enabled=“true” 在 about:config
下
Chrome 50.0.2661.94（64 位）在 chrome://flags
中启用 experimental Web Platform features

（这不是的副本，因为那个使用的是 BS 词缀）

Answer 1

Polyfill explanation.

您需要包含 JS polyfill 才能使用它。 Bootstrap 页面上 link 推荐的 polyfills 是

这是一个更新的代码笔：https://codepen.io/anon/pen/zBpNRk

我包含了所需的 polyfill（我使用了 stickyfill）并使用

调用它

var stickyElements = document.getElementsByClassName('sticky');

for (var i = stickyElements.length - 1; i >= 0; i--) {
    Stickyfill.add(stickyElements[i]);
}

图书馆建议您将此用于 css

.sticky {
   position: -webkit-sticky;
   position: sticky;
   top: 0;
}
.sticky:before,
.sticky:after {
    content: '';
    display: table;
}

最后你把 div 顺序搞混了。您需要将带有粘性 class 的 div 放在整行之外，因此我用另一个空的 <div class="col-xs-6"></div> 填充了该行的其余部分。

Answer 2

我解决了启用 flexbox。在 Bootstrap 的 Github repository I got an answer by a Bootstrap member 中提出问题后：

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/OXzoNJ If 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.

Answer 3

@wrldbt 的答案适用于 bootstrap 4 alpha 5，但在 alpha 6 中，-xs 中缀已被删除并且网格已被重写。

我把一些东西放在一起，更干净一些，使用当前版本 bootstrap 并且还包括一个使用 flexbox 的粘性页脚。

https://codepen.io/cornex/pen/MJOOeb

Answer 4

在稳定的 Bootstrap 4.0.0 版本中，这是使用 sticky-top class...

Demo

<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>

即使 header/navbar、内容和页脚的高度为 dynamic/unknown。

https://codeply.com/go/QJogUAHIyg

如何使用 CSS position sticky 来保持侧边栏可见 Bootstrap 4

How to use CSS position sticky to keep a sidebar visible with Bootstrap 4

css

twitter-bootstrap

css-position

bootstrap-4

twitter-bootstrap-4