html - 将元素固定在粘性元素下方

Question

我正在使用 Bootstrap 4。我有一个 header，在它下面是一个 navbar，sticky top。下面我有 行 2 列。在左列中，当用户滚动时，我希望 header 固定在导航栏下方。右列也是如此，我希望它保持固定在导航栏下方。我还希望它在导航栏未折叠的小视口(viewport)上工作。

这是运行示例: https://www.codeply.com/go/Z2DvfjYF0j

Answer 1

HTML:

<h3 class="bg-primary" id="MyStickeHeader">Header</h3>

CSS:

#MyStickeHeader{
  position: -webkit-sticky;
  position: sticky;
  top: 3.5rem;
}

这是 demo链接