问题
It is possible to have 2 sticky elements on top of each other? Or use one of them as a background?
TLDR; I was able to make this work with a library (StickyKit) that does what I'm looking for, but performs badly with new async scrolling.
Example
JSFiddle with StickyKit - https://jsfiddle.net/cibulka/4nd3b0tt/ - (this does what I'm describing, but performs poorly, see below)
How I did it: I wrapped sticky elements in the 200% wrapper, and floated them to left. Then I moved 1 of them (margin-left: -100%) on top of the other. This way they are on top of each other, but still keep their height.
Why this does not work with position:sticky
One of many quirks with position:sticky is that it does not work if any of its parents is overflow:hidden. See this answer for more info: Why does `overflow:hidden` prevent `position:sticky` from working?
What I need to do here is to make the 2 elements overlay somehow without their container be overflow:hidden. Or should I do something else entirely?
What I'm using now
For the time being, I've ditched the "200% container" and set my image container (.sticky.bg, see the fiddle) to height:0. This makes images "stuck", but they do not become "relative" again once user scrolls to the bottom.
This is obviously not ideal.
Background
I was a happy user of StickyKit for a long time. Unfortunately, it does not work very well with asynchronous scrolling, which is employed by more and more browsers to improve performance. With the new Firefox Quantum (57), for example, StickyKit is pretty much unusable.
I've created an issue in StickyKit Github, but package seems to be abandonned by the author: https://github.com/leafo/sticky-kit/issues/252
Because of that, I am forced to deprecate StickyKit and move to native position:sticky (polyfilled with StickyFill). Unfortunately there is a couple of things position:sticky can't do and this is one of them.
There is also another issue I'm having with position:sticky: Position sticky: scrollable, when longer than viewport
What I'm looking for
A recommendation, basically, how to approach this issue. I'm up for using different JS/jQuery library, writing my own code or use some quirky CSS hack to hack position:sticky functionality.
Thanks in advance!
来源：https://stackoverflow.com/questions/47618583/position-sticky-overlay