Sticky element inside overflow element

Question

I would like to make the timeline-header sticky to the top of the page in the following example: http://jsfiddle.net/m152usbd/1/

But because the timeline has overflow enabled, sticky stops working on timeline-header.

.timeline{
  overflow: auto;
}

.timeline-header{
  position: sticky;
  top: 0;
}

The closest I came to what I want is: http://jsfiddle.net/ztuf4gjc/1/

But I feel this is not a good solution, because I need to adjust every other element on the page to make this work and I can foresee some side-effects happening. Also, I want only the timeline section to be scrollable in the x-axis, not the entire page.

Does anyone know how to tackle this issue?

Update

Based on @a--m answers, this might not be possible with CSS unfortunately. Here is the js approach: http://jsfiddle.net/cvk43g1o/

If anyone knows how to do this with CSS, please let me know!

Answer 1

I think it's not possible to achieve what you ask using CSS only:

A stickily positioned box is positioned similarly to a relatively positioned box, but the offset is computed with reference to the nearest ancestor with a scrolling box, or the viewport if no ancestor has a scrolling box.

https://www.w3.org/TR/css-position-3/#sticky-pos

Since the parent timeline has a horizontal scroll, then the sticky refers to this one and loses the ability to track window as you desire. The limitation to sticky in this case is that can't track two different containers.