如何使用 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>

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

Bootstrap 4 建议 将 sticky 属性作为对 Affix jQuery 插件的支持：

删除了 Affix jQuery 插件。我们建议使用 position:sticky polyfill 代替。

我已经在以下方面进行了测试：

• Firefox 47.0 与 css.sticky.enabled=“true” 在 about:config

• Chrome 50.0.2661.94（64 位）与 experimental Web Platform features 在 chrome://flags --- 中启用

（这不是 如何在 Bootstrap 中制作粘性侧边栏的副本？ 因为那个使用的是 BS 词缀）

原文由 marcanuy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我解决了启用 flexbox 。在 Bootstrap 的 Github 存储库中提出问题后，我得到了 Bootstrap 成员 的回答：

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

原文由 marcanuy 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在稳定的 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>

即使在页眉/导航栏、内容和页脚的高度也是动态/未知的，这也有效。

https://codeply.com/go/QJogUAHIyg

原文由 Zim 发布，翻译遵循 CC BY-SA 4.0 许可协议