<!-- Hide and Show Desktop Header -->
<script>
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
	var currentScrollPos = window.pageYOffset;

	document.querySelectorAll(".hide-header").forEach(function(header) {
		if (prevScrollpos > currentScrollPos || !currentScrollPos) {
			header.style.top = "var(--wp-admin--admin-bar--height,0)";
		} else {
			header.style.top = "-100%"; // adjust this value to the height of your header
		}
	});

	prevScrollpos = currentScrollPos;
}
</script>

<style>
/* Show Hide Sticky Header Speed Control */
.hide-header {
	transition: all .4s ease!important;
}
</style>