One of my favourite and lesser known additions to CSS is position: sticky which essentially allows you to create an element that snaps at a specified position of the page to the top of the screen.
At present, support for position: sticky is relatively non-existent according to caniuse. The desktop browsers that currently have this implemented are Firefox and Safari.
But thankfully there are some great polyfills out there for this, the one I have found to be the more performant polyfill is by the Filament Group.
I won’t be showing you how to use it as the Github repository has installation and usage instructions, but in the few polyfills that I have tried this one stood out in the limited benchmarking that I did when looking for the best one.
Completely forgot that Firefox introduced it some time ago. Thanks a lot for the tip! It couldn’t come at a better time 🙂