The WPFolks app is out on iPhone and Android. Free, no ads. Download on the App Store Get it on Google Play
Skip to main content
Login Join
Snippet · JavaScript

Add a Class to the Header on Scroll

Shared by Hiral solanki · October 2, 2026

3 views
2 upvotes
Back to Snippets

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.

Know a different way to do this? Add your approach as a variation so folks can compare them side by side.
Submit a variation

0 comments