position:sticky - 到达页脚时不粘

Question

我有一个父容器。父容器有 2 个带有粘性页眉和页脚的子容器。问题在于，当用户滚动并到达页脚区域时，粘性页眉的位置会发生变化，即它会与其他可滚动内容一起上升。我为演示创建了一个 fiddle。 https://jsfiddle.net/d653wrxb/

<div>
   <div>
    <div class="sticky">Sticky Header</div>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
  </div>
  <footer></footer>
</div>

footer {
    background-color: red;
    padding: 20px 15px;
    height: 500px;
}

.sticky {
  position: sticky;
    top: 56px;
    background-color: #fafafa;
    z-index: 1;
  padding: 15px;
}

有没有什么办法能把表头贴到底。注意：我不能使用 position: absolute 因为它会破坏主要内容区域内的所有子项。

Answer 1

粘性元素仅在 parent 的维度内可见。当您的 parent div 离开视口时，粘性元素也会移出。将粘性 div 移动到外部 div。

<div>
  <div class="sticky">Sticky Header</div>
  <div>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
    <p>Dummy text to cause scrollbars</p>
  </div>
  <footer></footer>
</div>

已更新 fiddle：https://jsfiddle.net/qs5vfjL0/

position:sticky - 到达页脚时不粘

position:sticky - not sticky when it reaches the footer

html

css

css-position

sticky