This code helps to apply custom CSS for sticky headers by adding a class named "page-scrolled" to the body tag when the user is scrolling through the page.

page-scrolled.js

// This code helps to apply custom CSS for sticky headers by adding a class named "page-scrolled" to the body tag when the user is scrolling through the page.
<script>
	var lastScrollYPosition = 0;
	
	window.addEventListener('scroll', function() {
		if (window.scrollY > 0) {
			document.body.classList.add('page-scrolled');
		} else {
			document.body.classList.remove('page-scrolled');
		}
		
		if (window.scrollY > lastScrollYPosition) {
			document.body.classList.add('page-scrolled-forward');
			document.body.classList.remove('page-scrolled-backward');
		} else {
			document.body.classList.remove('page-scrolled-forward');
			document.body.classList.add('page-scrolled-backward');
		}
		
		lastScrollYPosition = window.scrollY;
	});
</script>