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沒有Navbar的偏移量，因為它設置為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固定頂部導航和固定側邊欄

Answer 2

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

我認為這是因為sticky-top有一個top：0px值，它優先於添加的自定義類。

所以我只是添加：

.sticky-top{
  top:56px;
}

這也修復了它在Safari中。 此外，無需將自定義類添加到div。