Prabhat Man Shrestha

May 20, 2018

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;

 

Digitize Your Business ? Let’s Talk