As you may have read a while ago,
position: sticky landed in WebKit. Now, the latest news is that Firefox Nightly supports sticky positioning too and that’s definitely good news!
The need for position: sticky
thead’s, huge FAQ sections with sticky questions, sticky sidebar blocks and sticky top bars of course.
I’m eager to see future implementations of this feature and there’s not doubt: sticky positioning will work best combined with responsive design.
position: stickyis great and it will be awesome when it will get more widely adopted, sooner or later.
How does it look like
top value which is mandatory as it lets the browser know the distance from the top of the viewport where the sticky element will be positioned to.
At this time, the browser support include: Chrome Canary (unprefixed), Firefox Nightly (unprefixed) and Safari 7 (OS X Mavericks - TBA). Plus, Safari and Chrome on iOS 6 already support sticky positioning (with
-webkit- prefix) which is pretty cool and it was a big surprise for me too, as I didn’t know it before writing this. Yet, no good news regarding Android support.
Also, in order to view this feature in action on both Canary and Nightly versions, you need to check some settings first. For Chrome Canary, you need to type “about://flags” in your browser address bar and search for “Enable experimental WebKit features”. On Firefox Nightly, type “about:config” and search for “layout.css.sticky.enabled”, the last one should be set to true.
As far as I tested, on Chrome Canary and the iOS’ Safari and Chrome, you are not able to use this type of positioning on table stuff like thead’s or td’s yet. Though, while reading some Stackoverflow discussions, people seem to have been reporting this as working in previous beta releases. On Firefox,
table elements support
position: sticky but the behavior is a little buggy though.
Still, this is work in progress and most likely it will be updated again and again. Also, it’s good to know that currently there is no available documentation to check out because this feature isn’t part of any W3C specifications. Let’s hope this will change in the near future.
If you’re looking for a wider cross-browser solution, there are some polyfills in the wild you may want to check out:
- Position Sticky by Philip Walton
- position: sticky; The polyfill! by Alec Rust
It’s our responsibility
I’m aware that just like
width: fit-content, which I wrote about a while ago,
position: sticky has low browser support at this time. So, you may be right to think you could “stick” with
But, isn’t staying up-to-date with the latest news and always trying cutting edge stuff makes us better developers? Keep experimenting, and have fun with it!