Bootstrap 4, navbar fixed-top and other sticky-top elements

Question

Here the reproduction: https://jsbin.com/lawafu/edit?html,output

Is this a bug? A mistake? A problem? An unrealizable idea?

Before scroll:

After scroll:

What I need:

Obviously I need to see the sidebar when I scroll down the page, using padding-top of the body for the fixed-top navbar.

I'm using this code for the sidebar:

<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 has no offset for the Navbar since it sets top:0. You can add a custom class to account for the Navbar height.

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

Demo: https://www.codeply.com/go/QeJOvbYswd

---

Related: Bootstrap 4 fixed top nav and fixed sidebar

Answer 2

Zim's answer was helpful, but did not work for me in Safari 12.0.1 on MacOS (Chrome 70 was fine, worked as expected).

I think this is because sticky-top has a top:0px value which was taking priority over the custom class added.

So instead I simply added:

.sticky-top{
  top:56px;
}

Which fixed it in Safari too. Additionally, there's no need to add the custom class to the div.