title: Sticky Header within a Scrollable Container
body: <p>There is a bunch of questions about the sticky elements in DOM and wide range of libraries to take care of it, for example:</p>
  
  <p>jquery.pin, sticky-kit and many more</p>
  
  <p>but the problem with all of them is that they only work with the whole body being scrolled, and with restriction that the parent container must have default overflow setting.</p>
  
  <p><a href="https://i.stack.imgur.com/iB1Do.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iB1Do.png" alt="enter image description here"></a></p>
  
  <p>The example page of <a href="http://leafo.net/sticky-kit/" rel="nofollow noreferrer">Sticky-kit</a> shows perfectly what I need. Just that in their case their case they actually use an <code>iframe</code>. In mine, it's a Div with <code>overflow: auto</code> (it's an app with flexbox layout with fixed header, footer and left menu, while the main content scrolls).</p>
  
  <p>So I want the red box 'stick me' to stay there when I scroll the gray box. The green elements have no scroll and they never move. My requirements:</p>
  
  <ul>
  <li>The body doesn't scroll</li>
  <li>No iframes</li>
  <li>I'd prefer no timeout running every 50ms</li>
  </ul>
  
  <p>So far I can see several solutions:</p>
  
  <ul>
  <li><p>position:fixed on the red box, and a) duplicate its content (not an option) b) dynamically adjust the margin/padding of the gray container to force elements to stay below the red box (perfect but the box may expand, and its not easy to monitor its height and readjust the margin). Like this one, but the header height might change: <a href="http://jsfiddle.net/KTgrS/" rel="nofollow noreferrer">http://jsfiddle.net/KTgrS/</a></p></li>
  <li><p>position: absolute on the red box, and readjust it on the scroll event of the gray box. Possible, but again the scroll doesn't provide the scroll 'delta', and getting it is kind of sketchy.</p></li>
  </ul>
  
  <p>Any other ideas or way to make the ones above feasible for actual production use? Support for the recent browsers is enough.</p>