如何使用CSS位置粘贴来使用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属性设置为仅位于侧边栏中的菜单时，相关文章部分正常滚动并获得菜单div的粘性行为，它不起作用：

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

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

引导4 recommends粘性属性作为对Affix jQuery插件的删除支持：

删掉了Affix jQuery插件。我们建议使用位置：粘性polyfill。

我测试过：

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

（这不是How to make a sticky sidebar in Bootstrap?的副本，因为那个使用BS附加词）

Answer 1

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

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>

这甚至在标题/导航栏的高度，内容和页脚是动态/未知的。

https://www.codeply.com/go/QJogUAHIyg

Answer 2

我解决了启用flexbox。在Bootstrap的Github存储库中提出问题之后，我得到了一个Bootstrap member的答案：

.col-xs-4没有.col-xs-8那么高，所以当粘性开始时，菜单基本上没有空间可以“浮动”。使.col-xs-4更高，一切正常：https://codepen.io/anon/pen/OXzoNJ如果你启用我们网格系统的Flexbox版本（通过$ enable-flex：true;），你可以免费获得自动等高列，这在你的情况下很方便。

Answer 3

Polyfill explanation.

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

• https://github.com/wilddeer/stickyfill
• https://github.com/filamentgroup/fixed-sticky

这是一个更新的codepen：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订单混淆了。你需要将div与整个行之外的粘性类放在一起，所以我用另一个空的<div class="col-xs-6"></div>填充了行的其余部分。

Answer 4

@wrldbt的答案可以解决引导4 alpha 5的问题，但是在alpha 6中，-xs中缀已被删除，并且网格已被重写。

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

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