Position: Sticky is Crazy

There are a lot of strange effects you can do with position sticky.

By utilizing negative margins, you can make something get "pre-scrolled", appearing before it's normal relative place. Combining this with setting different scales for the sticky container and contrasting scales for its contents, this gives a parallax effect. And then you can put a backdrop filter on that sticky container which opens up some seriously wacky scroll animations.

The key though is to have it placed low enough so that it's not visible until you start scrolling. So this is some text to fill out.

And some newlines

Just one more.

Okay, this should be enough.

Here is an example, marked up in tailwind, with the result rendered below. You should notice that the bottom is starting to get filtered, and as you scroll more, the filtering box is revealed more and more. Then, it has a fixed place container where it can rest and not overlap with anything else once you've scrolled far enough past in the page.

<div className="col-start-2 mb-4">
    <div className="h-[800px] relative flex -mt-[600px] scale-[60%] origin-bottom">
    <div className="sticky bottom-0 self-end w-full h-[200px] backdrop-filter backdrop-invert scale-[170%] origin-bottom">
        <div className="w-full h-full opacity-50 bg-gradient-to-r from-slate-300 to-purple-400" />
    </div>
    </div>
</div>

This is a pretty extreme example, but there are other ways to use this. One subtle way is just using ad make it prescroll juuuust a little bit. This will just give some movement to the image, feels similiar to a fade in but gives a different vibe.

The image below will start covering the text on this paragraph, but only for the text that is at the very bottom of the screen. It can feel a little weird, especially if you have too many items moving in different speeds.

That works... okayish. Requires a fixed size container and thus isn't that responsive. On mobile forever the image is left with a lot of space around it.