How to enable CSS position: sticky in mobile browsers?

css css-position mobile-browser
Ulukbek Abylbekov picture Ulukbek Abylbekov · Jul 22, 2017 · Viewed 14.7k times · Source

Added some position: sticky property to my webpage. On Desktop browser work fine but sucks in mobiles.

Answer

Cezar Augusto picture Cezar Augusto · Jul 22, 2017

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

Related questions

How can I center an absolutely positioned element in a div?

I need to place a div (with position:absolute;) element in the center of my window. But I am having problems doing so, because the width is unknown. I tried this. But it needs to be adjusted as the width …

Read More
Fixed position but relative to container

I am trying to fix a div so it always sticks to the top of the screen, using: position: fixed; top: 0px; right: 0px; However, the div is inside a centered container. When I use position:fixed it fixes the …

Read More
How to center a "position: absolute" element

I'm having a problem centering an element that has the attribute position set to absolute. Does anyone know why the images are not centered?

Read More