JavaScript
window.addEventListener('scroll', () => {
const header = document.querySelector('header.wp-block-template-part');
header.classList.toggle('is-stuck', window.scrollY > 0);
});CSS
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 > .wp-block-group {
transition: all .2s ease-in-out;
}
header.wp-block-template-part.is-stuck > .wp-block-group {
padding-top: var(--wp--preset--spacing--x-small) !important;
padding-bottom: var(--wp--preset--spacing--x-small) !important;
}