位置粘：覆盖

Question

可以将2个粘性元素叠加在一起吗？或者使用其中一个作为背景？

TLDR;我能够使用一个库（StickyKit）来完成这项工作，该库可以完成我正在寻找的工作，但是在执行新的异步滚动时表现不佳。

实施例

JSFiddle with StickyKit - https://jsfiddle.net/cibulka/4nd3b0tt/ - （这就是我所描述的，但表现不佳，见下文）

我是如何做到的：我在200%包装中包含了粘性元素，并将floated包裹在left中。然后我将其中一个（margin-left: -100%）移到另一个上面。这样他们就彼此重叠，但仍保持高度。

为什么这不适用于position:sticky

{strong}很多怪癖中的一个是position:sticky，如果它的任何父项是overflow:hidden，它就不起作用。有关详细信息，请参阅此答案：Why does `overflow:hidden` prevent `position:sticky` from working?

我需要做的是让2个元素以某种方式覆盖，不用他们的容器为overflow:hidden。或者我应该完全做其他事情吗？

我现在正在使用

目前，我已经放弃了“200％容器”并将我的图片容器（.sticky.bg，请参见小提琴）设置为height:0。这使得图像“卡住”，但是一旦用户滚动到底部，它们就不再变得“相对”。

这显然不太理想。

背景

很长一段时间我是StickyKit的快乐用户。不幸的是，它与asynchronous scrolling不能很好地协作，越来越多的浏览器使用它来提高性能。例如，使用新的Firefox Quantum（57），StickyKit几乎无法使用。

我在StickyKit Github中创建了一个问题，但作者似乎放弃了包裹：https://github.com/leafo/sticky-kit/issues/252

因此，我不得不弃用StickyKit并转移到原生position:sticky（与StickyFill一起填充）。不幸的是，position:sticky无法做到这一点，这就是其中之一。

我在position:sticky：Position sticky: scrollable, when longer than viewport

时还遇到了另一个问题

我正在寻找什么

建议，基本上，如何解决这个问题。我正在使用不同的JS / jQuery库，编写我自己的代码或使用一些古怪的CSS hack来破解position:sticky功能。

提前致谢！