Add Class While Scrolling?

Hey!

I don’t know why you need an extra class because if you’re not scrolling yet, you can just use the actual selectors of the elements that you want to modify and on scroll, append the ‘header-scrolled” selector. Anyway, try this in the functions.php file:

// scrolled or not
add_action('wp_footer', 'ava_custom_script');
function ava_custom_script(){
?>
<script>
(function($){
	$(window).scroll(function() {
        if($(window).scrollTop() > 0) {
			$('html').addClass('html-scrolled');
			$('html').removeClass('html-not-scrolled');
        } else {    
			$('html').addClass('html-not-scrolled');
			$('html').removeClass('html-scrolled');
        }
    });
})(jQuery);
</script>
<?php
}

Use “html-scrolled” if scrolled else use the “html-not-scrolled”.Note that you can also use the “header-scrolled-full” selector when scroll position value is greater than the header container height.

Best regards,
Ismael