What they do

scrollFunction

.js A vanilla JS scroll listener. Once the page loads, it watches the scroll position. When the user scrolls past the height of the

, it adds a scrolled class to . When they scroll back up, the class is removed. Uses { passive: true } for performance.

style.css Example CSS that reacts to that body.scrolled class:

Shrinks the header's inner flex container to 75px max-height Scales the site logo down to 65% of its original size Together these create a compact sticky header that collapses when the user scrolls down.

function.php A WordPress snippet that registers and loads scrollFunction.js correctly via wp_enqueue_script. It loads the script in the footer (the true last argument), which is the right place for non-critical JS.

How to implement

Place the JS file at /assets/js/scrollFunction.js inside your active theme folder. The enqueue path expects it there (get_stylesheet_directory_uri() . '/assets/js/scrollFunction.js').

Add the PHP snippet to your theme's functions.php — paste the contents of function.php into it (don't replace the whole file, just append the function and add_action call).

Add the CSS to your theme's style.css or a custom CSS block. You may need to adjust the selectors (.is-content-justification-space-between and .wp-block-site-logo) to match your theme's actual header markup — these look like they target a Gutenberg/FSE block theme.

Make sure your header is position: sticky or fixed in CSS, otherwise the visual collapse won't be visible to the user.