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 is-scrolled Class to Header

Shared by Hiral solanki · September 17, 2026

23 views
2 upvotes
Back to Snippets

Adds an is-scrolled class to the website header after the user scrolls 50 pixels, making it easy to create sticky header and scroll-based styling effects.

document.addEventListener('DOMContentLoaded', function () {
    const header = document.querySelector('.site-header');

    if (!header) {
        return;
    }

    function handleScroll() {
        header.classList.toggle('is-scrolled', window.scrollY > 50);
    }

    handleScroll();
    window.addEventListener('scroll', handleScroll);
});
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

Proudly supported by