溢出元素内的粘性元素

Question

我想在以下示例中将 timeline-header 置顶于页面顶部： http://jsfiddle.net/m152usbd/1/

但是由于时间线启用了溢出，sticky 在 timeline-header 上停止工作。

.timeline{
  overflow: auto;
}

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

最接近我想要的是： http://jsfiddle.net/ztuf4gjc/1/

但我觉得这不是一个好的解决方案，因为我需要调整页面上的所有其他元素才能使其正常工作，而且我可以预见一些 side-effects 会发生。此外，我只希望时间轴部分在 x-axis 中滚动，而不是整个页面。

有谁知道如何解决这个问题？

更新

根据@a--m 的回答，不幸的是，CSS 可能无法做到这一点。这是 js 方法：http://jsfiddle.net/cvk43g1o/

如果有人知道如何使用 CSS 执行此操作，请告诉我！

Answer 1

在我看来，您可以将 .timeline-header 的内容复制到 .timeline 中，据我所知，它似乎有效。

position: sticky 在应用于 .timeline-header 时不起作用的原因是因为滚动依赖于它的包含块，并且因为它占据了大部分你实际上看不到的包含块它在 returns 之前移动以相对定位。当 position: sticky 应用于 .timeline 时，包含块要大得多，您可以看到它在整个页面上滚动。

Answer 2

我认为仅使用 CSS 无法实现您的要求：

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

由于父级 timeline 有一个水平滚动条，所以粘性引用这个并且失去了跟踪 window 的能力，如你所愿。在这种情况下 sticky 的限制是无法跟踪两个不同的容器。

溢出元素内的粘性元素

Sticky element inside overflow element

html

css

overflow

sticky