Jamie’s Header Effects: A Free Sticky Header Plugin for Block Themes

Block themes have come a long way, but there’s still one thing I find myself fixing on nearly every site: the header.

You want it to stay at the top as people scroll. You want it to look good over a big hero image. You’d also like it to look right on every section, not only the first one. Doing that usually means custom CSS, some JavaScript and plenty of fiddling.

So I built a plugin for it, and it’s now free on WordPress.org.

See it in action

I first showed this off in a video a while ago. Since then I’ve tidied it up, added more options and released it as a proper plugin. The settings screen has changed a bit, but the effect is the same:

The headline feature: Chameleon mode 🦎

This is the one people get excited about.

As your visitor scrolls, the header checks the background colour of the section right underneath it and takes on that colour. It also switches its text between light and dark automatically so it stays readable.

You don’t need to set anything up for each section. It reads your Group blocks, Cover blocks and their overlays, then works out the colour for you.

On a page with lots of colourful sections, it makes the whole site feel more polished.

Other effects

If chameleon is too much for your design, there are four other options.

Frosted glass blur. A see-through, blurred header that lets the page show through. You control the colour, opacity and blur amount. It looks great over photography.

Solid sticky header. A classic sticky header in your chosen colour and opacity, with a soft shadow once it sticks.

Hide on scroll down, reveal on scroll up. The header slides out of the way while people read and comes back as soon as they scroll up. You can tune the sensitivity and delay.

Transparent overlay. The header floats over your first section, so your hero runs to the very top of the page without the layout jumping.

The sensible stuff

These are the details that make it safe to use on a live site:

• Works with any block theme. It finds your header template part automatically. For unusual themes, you can enter a custom CSS selector.
• Admin bar offset. On by default, so the header sits below the admin bar when you’re logged in.
• Mobile breakpoint. Turn the effect off on small screens if you prefer.
• Disable on specific templates. Home, front page, blog, single posts, pages, archives, 404 and search.
• Push content down or overlay. Choose whether the page starts below the header or underneath it.
• Accessible. It respects prefers-reduced-motion, so transitions and the hide-on-scroll animation are turned off for people who’ve asked for less motion.
• Lightweight. No jQuery.

How to set it up

1. Go to Plugins → Add New and search for “Jamie’s Header Effects”. You can also download it from WordPress.org.
2. Install and activate it.
3. Go to Appearance → Header Effects.
4. Tick Enable sticky header, choose Chameleon (or another style) and save.

That’s it. Scroll down your homepage and watch it change.

Requirements: a block theme, WordPress 6.2+ and PHP 7.4+.

Try it and tell me what you think

It’s free, it’s brand new, and I’d love your feedback. If it doesn’t detect your theme’s header, or there’s an effect you’d like added, let me know in the support forum.

If you like it, a review on WordPress.org would make my day. It’s the best way to help other people find it.