CSS
.wp-block-template-part header,
header.wp-block-template-part {
position: sticky;
top: 0;
z-index: 100;
background: var(--wp--preset--color--bg-light);
}
header.wp-block-template-part.is-stuck {
padding-block: 0;
transition: padding 0.2s ease;
}
header.wp-block-template-part.is-stuck .wp-block-group.with-position {
padding-top: 0.5rem !important;
padding-bottom: 0.5rem !important;
}Die Klasse .is-stuck gibt es nicht automatisch – die musst du via js setzen.
PHP
# in functions.php
add_action('wp_enqueue_scripts', function () {
wp_enqueue_script(
'fastpage-scripts',
get_template_directory_uri() . '/assets/js/scripts.js',
[],
wp_get_theme()->get('Version'),
true
);
});JavaScript
/* in assets/js/scripts */
window.addEventListener('scroll', () => {
const header = document.querySelector('header.wp-block-template-part');
header.classList.toggle('is-stuck', window.scrollY > 0);
});