position:sticky - not sticky when it reaches the footer

Question

I have a parent container. The parent container is having 2 children with a sticky header and a footer. The issue is that when the user scrolls and reaches the footer area, the sticky header's position changes, i.e it goes up along with the other scrollable contents. I have created a fiddle for the demo. 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;
} 

Is there any way to stick the header even if it reaches the bottom. Note: I cannot use position: absolute as it breaks all the children inside the main content area.

Answer 1

Sticky elements are visible only within the dimensions of the parent. As your parent div is going out of viewport, the sticky element is also moving out. Move the sticky div to the outer 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>

Updated fiddle : https://jsfiddle.net/qs5vfjL0/