Why it's time to embrace position sticky

Matt Studdert on October 15, 2018

Whenever I've taught people about CSS position, I've always warned against using position: sticky;. Browser support for all position values has b... [Read Full]
markdown guide

I suggest to use this with a feature query, @supports (position: sticky). With feature query if you want to offset the sticky point, like top: 20px, it will only apply the top value to the element if position: sticky is supported.


Would be nice to have this in the article actions/reactions bar, to stick it at the bottom of the article card/container.


I didn't even know about position: sticky, I'd only seen this done via JS which I never really liked. This is definitely something I could see us making use of.


Yeah, it’s great! Makes sticky elements super easy to implement.

I imagine this is much more performant than JS-driven alternatives?


I am a fan of 'position: sticky'. You have shown how it works great for webpage's headers, but think about how we can use it to improve other UIs.
Sticky headers work great for long tables/lists of information where the column header needs to be referenced continuously.


For sure! There’s plenty of opportunities to improve UIs. Will be thinking how else I could use it. The only problem will be trying to not get too carried away 😂


Except it doesn't work well in table headers. I mean check this example:

It works for me only in Firefox Mobile. Not in desktop Chrome or Firefox.

Does it work for anybody?


It seems to work ok for me.


Just looked at the page you linked their elements table is wrong, they need to put sticky on the th not the thead.

Adding this CSS would fix their problem.

#example_sticky_header_container thead th  {
  position: sticky;
  top: 0;

I love that you can easily give tables sticky headers with no extra work.

code of conduct - report abuse