Sneaky Header Blocker Trick The article explains a CSS-only technique for creating a sticky header that appears to change background color as a user scrolls down a webpage. The effect is achieved using two separate sticky "blocker" elements, each color-matched to their respective sections (blue for the hero and white for the main content), which sit behind the fixed header and seamlessly hand off to one another as the user scrolls past each container. No JavaScript is required for this visual trick, which relies entirely on the behavior of `position: sticky` elements becoming unstuck at the boundaries of their parent containers. Have you ever noticed that the site header on this blog does something a bit peculiar? When you first start scrolling, the sticky header appears to have a mostly-opaque blue background, covering up the blog post title/metadata: As you keep scrolling, though, something kinda strange happens. First, the cloud swoops pass by normally, as though the header had a transparent background: And then, when you get to the content, the header suddenly appears to have a white background: This is a fairly subtle thing, and I suspect most readers have never even noticed it. But there’s something about it which just feels so satisfying to me. It’s one of my favourite little bits of polish on this blog. 😄 A few times a year, I’ll hear from someone who is completely mystified by the effect and wants to know how I’m doing this. It’s actually quite a bit simpler than most people imagine There’s no JavaScript involved at all, this is entirely a CSS-based effect. In this blog post, I’m going to reveal the magic trick. We’ll also deepen our understanding of how Positioned layout works in CSS. 🪄 Link to this headingThe core concept Here’s the deal: the site header itself has a transparent background that never changes. It sits in front of the page using position: fixed and doesn’t really do anything special. The effect is created by sticky “blocker” elements: one in the hero and one in the main article area. They sit behind the site header, but in front of the other content. This is much easier to explain with a visualization, so I created a minimum viable reproduction of the effect. The “Reveal” slider will highlight what’s actually going on, and you can scroll through this little mockup to see how it works: - Categories - Courses - About The blue hero has a blue rectangle that sits right underneath the real header. It uses position: sticky , so it follows the user as they scroll, but critically, it won’t follow the user beyond its container. This is an aspect to sticky positioning that often isn’t super well-understood. When a sticky element reaches the end of its container, it becomes unstuck and scrolls out of view. Here’s a playground demonstrating this behaviour. Notice that the orange blocks won’t follow you outside their parent container: Code Playground