Open atomiks opened 1 year ago
Not the cleanest solution, but negative margins can be used to "combat" blocks being unstuck from their constrained box offsets during overscroll in webkit/gecko. You just also need to offset the opposing margin to keep the subsequent flow position intact, as well as keep in mind that this compensating opposite margin will affect where the block becomes "unstuck" when reaching the opposing edge of its containing block.
eg
body {
background: #f99;
margin: 0;
}
nav {
height: 10vh;
background: #9ff;
position: sticky;
top: 0;
margin-top: -100vh;
margin-bottom: 100vh;
}
main {
height: 200vh;
background: #99f;
border-top: 5vh solid #999;
}
Originally made a comment here, but seemed to get lost.
Problem
When combining
position: fixed
andposition: sticky
elements together, the latter moves during overscroll despite being in the "stuck" or "fixed" state, causing the issues seen in the demos below. I have noticed this on several sites where elements that should remain together now detach and overlap in undesirable ways when mixing each value.Demos
https://user-images.githubusercontent.com/22450188/212393676-cad40561-0731-4d46-a5bb-7cdd78e1e41d.mov
https://user-images.githubusercontent.com/22450188/212393955-03ecd51a-629a-4af2-9ed9-e77d4110ff1f.mov