Many questions arise regarding sticky elements in the DOM and the various libraries available to handle them, such as jquery.pin, sticky-kit, and more.
However, the issue with most of these libraries is that they only function when the entire body is scrolled, and require the parent container to have a default overflow setting.
https://i.stack.imgur.com/iB1Do.png
The demonstration page for Sticky-kit showcases exactly what I am looking for. In their case, they use an iframe while in mine, it's a Div with overflow: auto (an app with flexbox layout featuring fixed header, footer, and left menu, while the main content scrolls).
I want the red box 'stick me' to remain in place when scrolling through the gray box. The green elements do not scroll and stay put throughout. My criteria include:
- The body does not scroll
- No iframes
- Avoid using a timeout running every 50ms
Several solutions come to mind:
Apply position:fixed to the red box and either a) duplicate its content (not preferred) or b) dynamically adjust the margin/padding of the gray container to keep elements below the red box (ideal but monitoring its height and adjusting the margin can be challenging). Similar to this example, although changes in header height may pose an issue: http://jsfiddle.net/KTgrS/
Alternatively, use position: absolute on the red box and readjust it during the scroll event of the gray box. Feasible, but retrieving the scroll 'delta' can be tricky without direct access.
Are there any other creative ideas or effective methods to make the aforementioned approaches suitable for actual production use? Support for modern browsers is sufficient.