Sticky as a Local Fixed?

Avatar of Chris Coyier
Chris Coyier on

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.

Lemme set the stage a bit here.

You have a website and, like most, it scrolls.

This website will have modals. You’ll probably position: fixed the modal so that it’s predictably positioned regardless of scrolling. It’s possible the modal itself will scroll.

Notice the modal has a close button. We can position: absolute that in the upper-right corner, but if our modal scrolls, it’s a problem.

We’ve lost the close button behind the scrolling.

Should be a job for more position: fixed, right? Not really, sadly, as there is no such thing as a local context for position: fixed.

Well… actually there kinda (weirdly) is. If the modal has any sort of CSS transform on it (and it might already if you center it using the ol’ left: 50%; transform: translateX(-50%); trick) then the fixed position close button will come back home:

But… as the transform helped pull the close button back into place, you can see it behaves like position: absolute and not position: fixed. ¯\_(ツ)_/¯

There is a possibility here, though. The idea is that position: sticky is, in a sense, a locally scoped position: fixed. If we position the close button at the top: 0 anyway, it’ll just stick there as the modal scrolls down.

I just thought this was an interesting possibility. Ultimately, to be honest, if I had modals I worried about scrolling, I’d probably have like a .modal-header container and a .modal-content container. The header would sit on top always and the container would be the thing that could scroll.