html - 位置 :sticky - not sticky when it reaches the footer

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

有没有什么办法，即使到了底部也能粘住header。注意:我不能使用 position: absolute 因为它会破坏主要内容区域内的所有子项。

Answer 1

粘性元素仅在父元素的维度内可见。当您的父 div 离开视口(viewport)时，粘性元素也会移出。将粘性 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/