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:
charliepark.org/css-only-sticky-he...

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.

EDIT:

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