Sticky element inside overflow element

user_4900634 0
Viewed 1307

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!

sticky overflow css html
2 Answers

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.

user_2202720

It seems to me that you could just copy the contents of .timeline-header into .timeline and it seems to work as far as I understand the question.

The reason position: sticky wouldn't work when applied to .timeline-header is because the scroll is dependent on it's containing block and since it takes up most of it's containing block you don't actually see it move before it returns to position relative. When position: sticky is applied to .timeline the containing block is much larger allowing you to see it scroll throughout the page.

user_60240280
Related