Mike Solomon worked on a fancy scrollytelling post for Esquire and blogged about it. It has GIFs of each step along the way of figuring out not just position: sticky; but also using negative margins, wrapper divs, backgrounds, and even a smidge of JavaScript measuring to get it all right.
What it doesn’t have is any isolated demo of the effect. I figured I’d give a crack at reverse engineering it.
Here’s mine, which I’ll call “Sticky Figcaption with Protruding Figure”:
That demo is full of magic numbers to make the exit do the “tuck behind” effect. If that’s not important, this version is much cleaner.
Probably not quiteas Mike had it, but I’m not privy to the exact details he was going for in the blog post. His final GIF is:
Here’s a quick video I’ll shoot from the article itself in case that inspires you to figure out a different approach:
Erp! I actually spoke with Mike about all this, and he says that the main takeaway from all this (which flew right over my head — sorry Mike!) is that “sticky isn’t just for the top of the screen.” Notice in the final product how the sticky element becomes sticky long before it becomes the element at the top of the screen. It’s more like the middle of the screen. That’s what the top value is for with position: sticky; but, in this demo where the goal is to have it slide in and out of an image, it gets tricky.
After some back and forth forking…
