DEV Community

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 post

Juan Manuel Ramallo • Oct 15 '18

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

Ben Halpern • Oct 15 '18

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.

Matt Studdert • Oct 15 '18

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

Ben Halpern • Oct 15 '18

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

Matt Studdert • Oct 15 '18

I couldn’t say for sure, as I haven’t looked into the performance side. But I’d imagine so without any listeners.

Ben Halpern • Oct 16 '18

I already quickly implemented this in an internal tool for dev.to

PR: github.com/thepracticaldev/dev.to/... 😄

Mattia Astorino • Oct 16 '18

developers.google.com/web/updates/...

Andrew Bone • Oct 16 '18

There was a little talking about when the reaction bar changed.

dev.to/entrptaher/comment/5fdn

peksipatongeis • Oct 17 '18 • Edited

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.

Kosek • Oct 16 '18 • Edited

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?

Andrew Bone • Oct 16 '18 • Edited

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;
}

jkane50 • Apr 23 '20 • Edited

The above css could cause a problem if there was more than one header row. Since top:0 is there it should only be applied to the 1st header row.
thead tr:first-child th {
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: #2eA0ff;

}
Also need webkit for safari.
For multiple header rows you need nth child css or a little javascript where you sum the height of the previous rows.

Ryan • Oct 15 '18

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.

Matt Studdert • Oct 15 '18

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 😂

jkane50 • Apr 22 '20

Used position sticky recently to fix the header row in a table. It worked but when I was done I really didn't understand why I couldn't put position:sticky on the

after the rather than on individual tags. Also, I had a backgroundColor set on the TR parent of TH but after applying position:sticky to the child
tags, I had to put the backgroundColor directly on the
tags. I don't understand either of these things which means I don't fully understand position sticky. can you explain?