Question

我的HTML中有3个元素，例如

<div id="summary"></div>
<div id="header"></div>
<ul id="scroll-list"></ul>

我怎么能写我的CSS来确保当我向下滚动整个页面时，summary会向上滚动，当summary消失时，header会粘在顶部？< / p>

Answer 1

使用jQuery并计算之前height的{{1}}，或者您可以使用div position:sticky，如下所示，

粘性定位是相对定位和固定定位的混合。该   element被视为相对位置，直到它穿过指定的   阈值，此时它被视为固定位置。

您必须指定至少有一个顶部，右侧，底部，   或留下粘性定位以表现出预期。

CSS

#summary {
  width: 100%;
  height: 300px;
  background: #ccc;
}

#header {
  width: 100%;
  height: 60px;
  background: #fcc;
  position: sticky;
  top: 10px;
}

#scroll-list {
  height: 800px;
  background: #cc1;
}

更新 -

位置：粘滞处于Edge的开发阶段，IE不支持，但您可以在caniuse.com上检查浏览器的兼容性。

滚动下来时如何使中间元素粘住

1 个答案: