Javascript 位置：覆盖

有可能有两个粘性元素相互重叠吗？或者使用其中一个作为背景

TLDR；我可以使用一个库（）来完成这项工作，该库完成了我正在寻找的功能，但在使用新的异步滚动时性能很差

例子 JSFIDLE和StickyKit--（这与我描述的一样，但性能很差，见下文）

我是如何做到的：我将粘性元素包装在

200%

包装中，然后

将它们浮动到
左侧。然后我将其中一个（左边距：-100%
）移到另一个的上面。这样一来，它们彼此顶在一起，但仍然保持高度

为什么这不适用于
position:sticky
position:sticky的许多怪癖之一是，如果其父项中有任何一个是
溢出：隐藏的
，则它不起作用。有关更多信息，请参阅此答案：

我在这里需要做的是使这两个元素以某种方式重叠，而不重叠它们的容器是
overflow:hidden
。或者我应该完全做别的事情

我现在用的是什么
目前，我已经放弃了“200%容器”，将我的图像容器（
.sticky.bg
，请参阅fiddle）设置为
高度：0
。这会使图像“卡住”，但一旦用户滚动到底部，它们就不会再次成为“相对的”

这显然不理想

背景
我很长一段时间都是StickyKit的快乐用户。不幸的是，它不能很好地使用，越来越多的浏览器使用它来提高性能。例如，对于新的FirefoxQuantum（57），StickyKit几乎无法使用

我在StickyKit Github中创建了一个问题，但作者似乎放弃了这个包：

正因为如此，我不得不弃用StickyKit，转而使用native
位置：sticky
（polyfilled with）。不幸的是，有两件事
position:sticky
做不到，这就是其中之一

我的
位置还有另一个问题：粘性
：

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

提前感谢
--我正在使用hc sticky。已更新和维护，如果元素未从视口顶部开始，则不会跳跃。如果是，那么我有一个解决办法。请看链接。谢谢！我一定会查的。下载zip。我从很多演示中学习了如何使用。