When to use position sticky with css?

Question

I've never used the position: sticky; and found this on MDN but couldn't understand that when should I use this position. Can anyone visualise this position?

Answer 1

As described in the acticle:

position: sticky is a new way to position elements and is conceptually similar to position: fixed. The difference is that an element with position: sticky behaves like position: relative within its parent, until a given offset threshold is met in the viewport.

It is basically the same as position: fixed but the sticky element can't go out of the parent element. With the offset position of top you set a property of when the sticky element should scroll with the page. So for example when the top is set to 10px it will scroll with the page when top is 10px away of your window screen:

.sticky {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  top: 10px;
}

It has not been implented yet. However you can test this experimental property.

In chrome you can enable the enable-experimental-web-platform-features flag by just following this link: about://flags/#enable-experimental-web-platform-features

Example page of the acticle

---

You can use a Jquery plugin to mimic this behaviour: stickyfill