{"id":383587,"date":"2026-10-09T13:11:18","date_gmt":"2026-10-09T13:11:18","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/jamies-header-effects\/"},"modified":"2026-10-09T13:10:46","modified_gmt":"2026-10-09T13:10:46","slug":"jamies-header-effects","status":"publish","type":"plugin","link":"https:\/\/mr.wordpress.org\/plugins\/jamies-header-effects\/","author":23355210,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"1.0.0","stable_tag":"1.0.0","tested":"7.1.3","requires":"6.2","requires_php":"7.4","requires_plugins":null,"header_name":"Jamie's Header Effects","header_author":"Jamie Marsland","header_description":"Beautiful sticky header effects for block themes: Chameleon mode that recolours the header to match each section as you scroll, frosted-glass blur, hide-on-scroll-down, and transparent overlay headers. Theme-agnostic, accessible, no jQuery.","assets_banners_color":"243244","last_updated":"2026-10-09 13:10:46","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"https:\/\/github.com\/jamiemarsland\/jamies-header-effects","header_author_uri":"https:\/\/profiles.wordpress.org\/jamiemarsland\/","rating":0,"author_block_rating":0,"active_installs":0,"downloads":26,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0.0":{"tag":"1.0.0","author":"jamiemarsland","date":"2026-10-09 13:10:46","revision":3736704}},"upgrade_notice":[],"ratings":[],"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3736704,"resolution":"128x128","location":"assets","locale":"","width":128,"height":128},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3736704,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256}},"assets_banners":{"banner-1544x500.jpg":{"filename":"banner-1544x500.jpg","revision":3736704,"resolution":"1544x500","location":"assets","locale":"","width":1544,"height":500},"banner-772x250.jpg":{"filename":"banner-772x250.jpg","revision":3736704,"resolution":"772x250","location":"assets","locale":"","width":772,"height":250}},"assets_blueprints":{"blueprint.json":{"filename":"blueprint.json","revision":3736705,"resolution":false,"location":"assets","locale":"","contents":"{\"$schema\":\"https:\\\/\\\/playground.wordpress.net\\\/blueprint-schema.json\",\"landingPage\":\"\\\/\",\"preferredVersions\":{\"php\":\"8.2\",\"wp\":\"latest\"},\"features\":{\"networking\":true},\"steps\":[{\"step\":\"setSiteOptions\",\"options\":{\"blogname\":\"Aurelia\",\"blogdescription\":\"Small-batch ceramics from the Cornish coast\"}},{\"step\":\"login\",\"username\":\"admin\",\"password\":\"password\"},{\"step\":\"runPHP\",\"code\":\" true,\\n\\t'background_style' => 'chameleon',\\n\\t'overlay_content' => true,\\n\\t'push_content_down' => false,\\n\\t'hide_on_scroll_down' => false,\\n\\t'reveal_on_scroll_up' => true,\\n\\t'sticky_bg_opacity' => 0.96,\\n\\t'transition_speed_ms' => 450,\\n\\t'admin_bar_offset' => true,\\n) );\\nupdate_option( 'jamies_header_effects_options', $o );\\n\"},{\"step\":\"runPHP\",\"code\":\" 'page',\\n\\t'post_status' => 'publish',\\n\\t'post_title' => 'Home',\\n\\t'post_name' => 'home',\\n\\t'post_content' => $content,\\n) );\\nif ( $id && ! is_wp_error( $id ) ) {\\n\\tupdate_option( 'show_on_front', 'page' );\\n\\tupdate_option( 'page_on_front', $id );\\n\\tupdate_post_meta( $id, '_wp_page_template', 'page-no-title' );\\n}\\n\"},{\"step\":\"installPlugin\",\"pluginData\":{\"resource\":\"wordpress.org\\\/plugins\",\"slug\":\"jamies-header-effects\"},\"options\":{\"activate\":true}}]}"}},"all_blocks":[],"tagged_versions":["1.0.0"],"block_files":[],"assets_screenshots":{"screenshot-1.jpg":{"filename":"screenshot-1.jpg","revision":3736704,"resolution":"1","location":"assets","locale":"","width":1600,"height":1004},"screenshot-2.jpg":{"filename":"screenshot-2.jpg","revision":3736704,"resolution":"2","location":"assets","locale":"","width":1280,"height":800},"screenshot-3.jpg":{"filename":"screenshot-3.jpg","revision":3736704,"resolution":"3","location":"assets","locale":"","width":1280,"height":900}},"screenshots":{"1":"Chameleon mode: the header takes on the colour of each section as you scroll.","2":"Frosted-glass blur header over a photo.","3":"The settings screen under Appearance \u2192 Header Effects."}},"plugin_section":[],"plugin_tags":[211323,1431,250933,10213,179681],"plugin_category":[],"plugin_contributors":[268548],"plugin_business_model":[],"class_list":["post-383587","plugin","type-plugin","status-publish","hentry","plugin_tags-block-theme","plugin_tags-header","plugin_tags-scroll-effects","plugin_tags-sticky-header","plugin_tags-transparent-header","plugin_contributors-jamiemarsland","plugin_committers-jamiemarsland"],"banners":{"banner":"https:\/\/ps.w.org\/jamies-header-effects\/assets\/banner-772x250.jpg?rev=3736704","banner_2x":"https:\/\/ps.w.org\/jamies-header-effects\/assets\/banner-1544x500.jpg?rev=3736704","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/jamies-header-effects\/assets\/icon-128x128.png?rev=3736704","icon_2x":"https:\/\/ps.w.org\/jamies-header-effects\/assets\/icon-256x256.png?rev=3736704","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/jamies-header-effects\/assets\/screenshot-1.jpg?rev=3736704","caption":"Chameleon mode: the header takes on the colour of each section as you scroll."},{"src":"https:\/\/ps.w.org\/jamies-header-effects\/assets\/screenshot-2.jpg?rev=3736704","caption":"Frosted-glass blur header over a photo."},{"src":"https:\/\/ps.w.org\/jamies-header-effects\/assets\/screenshot-3.jpg?rev=3736704","caption":"The settings screen under Appearance \u2192 Header Effects."}],"raw_content":"\n

Jamie's Header Effects makes your block theme's header feel alive. Turn it on, pick an effect, and your header follows the visitor down the page \u2014 gracefully.<\/p>\n\n

Chameleon<\/strong> \u2014 the headline feature. As you scroll, the header samples the colour of the section underneath it and recolours itself to match, automatically switching its text between light and dark for contrast. Scroll from a navy hero into a cream section into a forest-green footer and the header changes with you. No configuration per section; it just works.<\/p>\n\n

Frosted blur<\/strong> \u2014 a translucent, blurred header that lets the page show through, like frosted glass. Set the colour, opacity and blur amount.<\/p>\n\n

Solid colour<\/strong> \u2014 a classic sticky header with your chosen colour and opacity, and a soft shadow when stuck.<\/p>\n\n

Hide on scroll down, reveal on scroll up<\/strong> \u2014 the header slips away while you read and comes back the moment you scroll up. Tune the sensitivity and delay.<\/p>\n\n

Transparent overlay header<\/strong> \u2014 float the header over your first section for the full-bleed hero look, with no layout jump.<\/p>\n\n

Everything else you'd expect is here too: an automatic admin-bar offset, z-index control, a \"push content down\" option, a mobile breakpoint to disable the effect on small screens, and the ability to switch it off for particular post types or templates. Transitions respect prefers-reduced-motion<\/code>.<\/p>\n\n

It's theme-agnostic (it finds your header automatically, with an override selector for unusual themes), accessible, and ships no jQuery.<\/p>\n\n

Settings:<\/strong> Appearance \u2192 Header Effects.<\/p>\n\n\n

    \n
  1. Upload the jamies-header-effects<\/code> folder to \/wp-content\/plugins\/<\/code>, or install it from the Plugins screen.<\/li>\n
  2. Activate the plugin.<\/li>\n
  3. Go to Appearance \u2192 Header Effects<\/strong>, tick Enable sticky header<\/strong>, choose a background style (try Chameleon<\/strong>), and save.<\/li>\n<\/ol>\n\n\n
    \n

    Which themes does it work with?<\/h3><\/dt>\n

    Any block theme. By default it looks for the header template part (header.wp-block-template-part<\/code>, then the first header<\/code> inside the site wrapper). If your theme is unusual, enter your own CSS selector in the Header selector<\/strong> field.<\/p><\/dd>\n

    How does Chameleon decide the colour?<\/h3><\/dt>\n

    As you scroll, it looks at the section directly beneath the header, finds that section's background colour (including Cover blocks and their overlays), and applies it to the header at your chosen opacity. It then picks black or white text based on the colour's brightness so the header stays readable. Sections with no solid background (an image-only section, say) make the header transparent.<\/p><\/dd>\n

    Does it work with the WordPress admin bar?<\/h3><\/dt>\n

    Yes. Offset for admin bar<\/strong> (on by default) positions the sticky header just below the admin bar when you're logged in.<\/p><\/dd>\n

    Can I turn it off on mobile, or on certain pages?<\/h3><\/dt>\n

    Yes. Set a mobile breakpoint to disable it on small screens, and untick it for specific post types or templates (home, front page, blog, single, page, archive, 404, search) under Disable on<\/strong>.<\/p><\/dd>\n

    What's the difference between \"Push content down\" and \"Overlay page content\"?<\/h3><\/dt>\n

    \"Push content down\" adds space below the header so content starts beneath it. \"Overlay page content\" does the opposite: it floats the header over the first section, the classic transparent-hero look. If both are ticked, overlay wins.<\/p><\/dd>\n

    Does it respect reduced-motion preferences?<\/h3><\/dt>\n

    Yes. If a visitor has asked their system to reduce motion, transitions are disabled and the hide-on-scroll animation is turned off.<\/p><\/dd>\n\n<\/dl>\n\n\n

    1.0.0<\/h4>\n\n
      \n
    • Initial release: Chameleon, frosted blur and solid sticky backgrounds; hide on scroll down \/ reveal on scroll up; transparent overlay and push-content-down layouts; admin-bar offset; mobile breakpoint; disable by post type or template; reduced-motion support.<\/li>\n<\/ul>","raw_excerpt":"Sticky header effects for block themes: a Chameleon header that recolours to match each section, frosted blur, hide-on-scroll and overlay.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/mr.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/383587","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mr.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/mr.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/mr.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=383587"}],"author":[{"embeddable":true,"href":"https:\/\/mr.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/jamiemarsland"}],"wp:attachment":[{"href":"https:\/\/mr.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=383587"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/mr.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=383587"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/mr.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=383587"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/mr.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=383587"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/mr.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=383587"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/mr.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=383587"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}