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

这里是再现：https://jsbin.com/lawafu/edit?html,输出 https://jsbin.com/lawafu/edit?html,output

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

Before scroll:

After scroll:

我需要的:

显然，当我向下滚动页面时，我需要看到侧边栏，使用正文的 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>

引导程序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>

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

Related: Bootstrap 4 固定顶部导航和固定侧边栏 https://stackoverflow.com/questions/49641293/bootstrap-4-fixed-top-nav-and-fixed-sidebar/49650313