One of the biggest implementation pains with scrollytelling is the sticky graphic pattern, whereby the graphic scrolls into view, becomes “stuck” for a duration of steps, then exits and “unsticks” when the steps conclude. This post will focus on the easiest solution we’ve come up with yet: offloading the sticky complexity to CSS, using position: sticky.

I'm working through some product landing pages for my pocket notebooks and I really like the things you can do with position: sticky without having to worry about fixing things when it's not supported (it's an enhancement and degrades wonderfully). This tutorial shows how you can use some graph related graphics and control them through the scrolling story.

Why use Sticky?
The short version: when using the sticky graphic pattern, you need a bunch of JavaScript to handle the stuck state, dimensions, etc.. With this approach, that is all done with (minimal) CSS. This means less bugs, less maintenance, and more happiness.