[CSS 3] Overflow & sticky problem

<!-- HTML -->
<div class="wrap">
  <div class="headers">
    <div class="scroller">
      <div class="track">
        <div class="heading">Heading 1</div>
      </div>
      ...
    </div>
  </div> <!-- headers -->
...
/* Styles */
.headers {
  position: sticky;
  top: 0;
  z-index: 1;
}
.scroller {
  overflow: auto;
}

 

Basiclly "headers" should wrap "scroller" container. "headers" & "scroller" cannot be siblings.

 

Post1

Other solution relate to height