This is not new anymore, nowadays it became so easy to have a piece of content stuck while you’re scrolling. No JS, no hassle just some CSS
position: sticky magic. But the real thing is dealing with tabular sticky info.
Remember the last web app you’re working on it that had a large table with lots of data rows? Feels like yesterday, no? Well, having this scenario, in terms of UX, it’s almost mandatory to have
tr’s stuck while browsing the tabular data.
Sounds easy, but …
tr’s: not going to happen anytime soon.
For tables, position: sticky defers to the position: relative spec. At this time, Blink only supports CSS 2.1 for positioned elements, and the position: relative CSS 2.1 spec says that it does not apply to <thead> and <tr> elements.
from the Chrome bug
For now, sticky positioning for
th’s seems to be the only workaround and it works just fine in stable Chrome, Firefox, Edge and Safari browsers.
CSS writing-mode experiment