Menu
Added some position: sticky property to my webpage. On Desktop browser work fine but sucks in mobiles.
448
CSS Demo: position To see the effect of sticky positioning, select the position: sticky option and scroll this container. The element will scroll along with its container, until it is at the top of the container (or reaches the offset specified in top ), and will then stop scrolling, so it stays visible.
That can happen for many reasons: Position sticky will most probably not work if overflow is set to hidden, scroll, or auto on any of the parents of the element. Position sticky may not work correctly if any parent element has a set height. Many browsers still do not support sticky positioning.
It is available on Chrome (yay), Firefox and Safari. Here are more details about position:sticky : Specification.
Browsers Support Position Sticky is supported by all major modern browsers, except for old IE. For Safari browsers you will need to add the -webkit prefix.
sticky property for Chrome and Safari for iOS needs to be set with -webkit vendor first:
.element {
position: -webkit-sticky;
position: sticky;
}
You can check about browser compatibility in canIUse
101
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
