Add or remove a CSS class when the user scrolls past a specific point, useful for sticky headers, navigation effects, and scroll-based styling.
const header = document.querySelector('.site-header');
window.addEventListener('scroll', () => {
header.classList.toggle('is-scrolled', window.scrollY > 50);
});
Tested on
WordPress 7.1
Reported by the author on October 2, 2026. WPFolks has not verified this.