There is a lil’ UI detail on this blog. Most people don’t even notice it, but the ones who do often reach out, asking how on earth it works. It feels like it defies the rules of CSS! In this blog post, I’ll break down the surprisingly-straightforward implementation so you can start using this trick yourself!

Josh W. Comeau's platform provides resources in frontend development, React.js, and CSS, offering insightful articles, tutorials, and code examples. With a focus on accessible and creative web development techniques, Josh W. Comeau empowers developers to craft engaging user experiences and solve complex problems in the world of web development.

Josh W Comeau

A CSS-only technique for creating a sticky header that appears to change background color as the user scrolls through different page sections. Instead of modifying the header itself, two color-matched 'blocker' elements using position:sticky sit behind the fixed header — one in the hero section (blue) and one in the main content area (white). As the user scrolls, each blocker naturally exits its container, creating a seamless hand-off effect. The post also covers design constraints, how to integrate decorative SVG swoops into the layering, and when JavaScript fallbacks are necessary.

Sneaky Header Blocker Trick • Josh W. Comeau

Link to this heading All of the tricks up my sleeves