"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."
"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."
The blog showcases a sticky header that initially appears with a blue background, transitioning to white as users scroll. This effect is achieved using CSS without any JavaScript. The header remains fixed while transparent, and the visual change is created by sticky 'blocker' elements positioned behind the header. A minimum viable reproduction is provided to illustrate the effect, allowing users to understand the mechanics of positioned layout in CSS.
Read at Joshwcomeau
Unable to calculate read time
Collection
[
|
...
]