Sticky floating sidebar with pure CSS

In this short post I will show you how to make a floating but sticky elements on a side bar. The element is sticky to the bottom of the screen, but when content is scrolled then the upcoming header or footer element gets precedense and moves the sticky element around. See how it behaves on an animation.