Bootstrap 4，导航栏固定顶部和其他粘性顶部元素

Question

这里的复制：https://jsbin.com/lawafu/edit?html,output

这是一个错误吗？一个失误？一个问题？一个不可实现的想法？

滚动前：

滚动后

我需要什么：

显然，当我向下滚动页面时，我需要看到侧边栏，使用主体的填充顶部作为固定顶部导航栏。

我在侧边栏中使用此代码：

<div class="sticky-top">
  <ul class="list-group">
    <li class="list-group-item active">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Answer 1

Bootstrap sticky-top因为设置top:0而没有Navbar的偏移量。您可以添加自定义类来计算导航栏高度。

.sticky-offset {
    top: 56px;
}

<div class="sticky-top sticky-offset">
  <ul class="list-group">
    <li class="list-group-item active">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

演示： https://www.codeply.com/go/QeJOvbYswd

相关： Bootstrap 4 fixed top nav and fixed sidebar

Answer 2

Zim的回答很有帮助，但在MacOS的Safari 12.0.1中对我不起作用（Chrome 70很好，按预期工作）。

我认为这是因为sticky-top的top：0px值比添加的自定义类优先。

因此，我只是添加了：

.sticky-top{
  top:56px;
}

也在Safari中修复了该问题。此外，无需将自定义类添加到div。