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

Question

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

这是一个错误吗？一个错误？一个问题？一个无法实现的想法？

滚动前：

滚动后：

我需要什么：

显然，当我向下滚动页面时，我需要看到侧边栏，使用 body 的 padding-top 作为固定顶部导航栏。

我正在使用此代码作为侧边栏：

<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。您可以添加一个自定义类来说明导航栏的高度。

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