Html 引导4、导航条固定顶部和其他粘性顶部元件

复制品如下：

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

滚动前：

滚动后：

我需要什么：

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

我在侧边栏中使用以下代码：

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

Cras justo odio
Dapibus ac设施在
Morbi leo risus
Porta ac concetetur ac
eros的前庭

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>

。粘性偏移量{
顶部：56px；
}

Cras justo odio
Dapibus ac设施在
Morbi leo risus
Porta ac concetetur ac
eros的前庭

演示：

---

相关：

---

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

我认为这是因为StickyTop有一个top:0px值，它优先于添加的自定义类

因此，我只是补充说：

.sticky-top{
  top:56px;
}

---

在狩猎中也解决了这个问题。此外，无需将自定义类添加到div。

谢谢@ZimSystem，但是如果我将StickyTop应用到

col

div呢？它不再工作了：是的，这是因为col是flexbox子项，默认情况下将“拉伸”。要解决这个问题，请将align self start添加到col：你们为我节省了一堆时间。非常感谢。