置顶 Bootstrap Div 固定滚动答案

【问题标题】：Sticky top Bootstrap Div fixed scroll置顶 Bootstrap Div 固定滚动
【发布时间】：2019-07-04 13:46:19
【问题描述】：

我试图在滚动时使用引导程序的sticky-top 设置一个div，我尝试了以下方法：

<div class="col-md-4">
  <div class="sticky-top">
     <app-reserva></app-reserva>
  </div>
</div>

我读过类似的问题，他们说您必须添加以下内容：

.sticky-top { top: 0.5em; }

但这对我也不起作用，我错过了什么？

【问题讨论】：

请用英文描述您的问题
如果你为 SO 社区做一个工作演示来研究它会很有帮助

标签： css angular bootstrap-4

【解决方案1】：

IE11 和 IE10 会将 position:sticky 渲染为 position:relative。因此，我们将样式包装在 @supports 查询中，将粘性限制为仅可以正确呈现它的浏览器。在 div 中使用下面的类，您可能还需要使用更多的 css 来指定 div 的位置

<div class="sticky-top">...</div>

【讨论】：

【解决方案2】：

.col-md-4 {
  height: 1000px;
  background: black;
}

.sticky-top {
  color: white;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="col-md-4">
  <div class="sticky-top">
    hello
  </div>
</div>

【讨论】：