Is it possible to have 2 sticky elements on top of each other? Or use one of them as a background?
TL; DR; I was able to do this work using the library ( StickyKit ), which does what I am looking for, but does not work well with the new asynchronous scrolling.
Example
JSFiddle with StickyKit - https://jsfiddle.net/cibulka/4nd3b0tt/ - (this does what I describe but does not work well, see below)
How I did it: I wrapped the sticky elements in a 200% wrapper and floated them to left . Then I moved 1 of them ( margin-left: -100% ) on top of the other. Thus, they are on top of each other, but still retain their growth.
Why this does not work with position:sticky
One of many tricks with position:sticky is that it does not work if any of its parents are overflow:hidden . See this answer for more information: Why does “overflow: hidden” prevent the “sticky” position from working?
What I need to do is to make 2 elements overlap somehow without their overflow:hidden container. Or do I need to do something else?
What am i using now
Currently, I have removed the “200%” container and set the container for images ( .sticky.bg , see script) to height:0 . This makes the images "stuck", but they do not become "relative" again as soon as the user scrolls down.
This is obviously not perfect.
Background
I have long been a happy user of StickyKit. Unfortunately, this does not work very well with asynchronous scrolling , which is used by more and more browsers to improve performance. For example, using the new Quantum (57) browser, StickyKit is pretty unsuitable.
I created a problem in StickyKit Github, but the package seems to be left by the author: https://github.com/leafo/sticky-kit/issues/252
Because of this, I have to abandon StickyKit and switch to native position:sticky (poly filled StickyFill ). Unfortunately, there are a few things that position:sticky cannot do, and this is one of them.
Another issue I ran into with position:sticky : Position is sticky: scrollable if longer than the viewport
What i'm looking for
The recommendation is basically how to approach this problem. I am going to use another JS / jQuery library, write my own code, or use some dodgy CSS hacks to crack the position:sticky functionality.
Thanks in advance!