position：sticky-到达页脚时不发粘

Question

我有一个父容器。父容器有2个带有粘性页眉和页脚的子级。问题在于，当用户滚动并到达页脚区域时，粘贴标头的位置会发生变化，即它与其他可滚动内容一起上升。我为演示创建了一个小提琴。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

Sticky元素仅在父级尺寸内可见。当您的父div离开视口时，sticky元素也将移出。将粘性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>

更新的小提琴：https://jsfiddle.net/qs5vfjL0/