position:sticky is back in Chrome

Four years ago Eric Bidelman created a rather awesome blog post about the fact that position: sticky landed in WebKit, which at the time was the engine that powered Chrome (as well as many other browsers including Safari). One year later, and much to the consternation of web developers we removed position:sticky from Chrome because "the current implementation isn't designed in a way that integrates well with the existing scrolling and compositing system".

We've always wanted to get it back in to Chrome as the bug stated, "Once we've got our scrolling and compositing house in order, we should return to position: sticky and implement the feature in a way that integrates well with the rest of the engine". The meta bug tracking the implementation has been worked on since 2013.

The great news is that as of Chrome 56 (currently beta as of December 2016, stable in Jan 2017) position: sticky is now back in Chrome.

What is position:sticky?

It's taken a little while to get here, so why am I excited about it?

position:sticky is a CSS positioning attribute that allows you to fix an element to the viewport (i.e, anchor it to the top of the screen) but only when its parent is visible in the viewport and it is within the threshold value. When it is not fixed to the viewport, the element will act like it is position: relative. It is a very nice and simple addition to the platform that removes the need to use JavaScript in an onscroll event handler just to lock an element to the top of the viewport.

This is what it looks like on my blog. It allows me to keep the current section's header at the top of the screen whilst you read my rather long and laborious articles :\

To implement this feature specify that the position attribute should have the value of sticky on the element that you want to be, er, stuck. Additionally, you can also add in the offset at where it needs to be stuck.

    h3 {
      /* Element will be 'fixed' when it ... */
      position: sticky;
      /* ... is 10px from the top of the viewport */
      top: 10px;
    }

The previous example will fix the <h3> element at 10px from the top of the viewport. To fix it directly to the top of the viewport you would set the top attribute as top: 0px.

Support for this feature is pretty strong. It is available on Chrome (yay), Firefox and Safari. Here are more details about position:sticky: