Position: sticky; is amazing but has issues on IOS
Position: sticky is back and works in Chrome from version 56 onward. But there is significant disparity in how Chrome/Firefox and Safari implement the feature.
A stickily positioned box is positioned similarly to a relatively positioned box, but the offset is computed with reference to the nearest ancestor with a scrolling box, or the viewport if no ancestor has a scrolling box.
It is useful for any time you want a UI element to stick around in view as the user is scrolling, but not become sticky until the element gets to a specific distance from the top/bottom/left/right egde of the scrolling viewport.
Use of the component:
position: sticky;
top:0;
Whereas position: sticky is not prefixed for IOS, so you can work around it by manually adding in the prefixed value like:
position: sticky;
position: -webkit-sticky;
top:0;