sticky-header-on-scroll.html

<header class="hdr_top"></header>

<style>
.hdr_top { position: fixed; top: 0; left: 0; right: 0; z-index: 2; transition: transform 0.4s; background-color: #000; }
.scroll-down .hdr_top { transform: translate3d(0, -100%, 0); }
.scroll-up .hdr_top { padding: 10px 0; }
</style>

<script>
  // Sticky Header
const body = document.body;
const scrollUp = "scroll-up";
const scrollDown = "scroll-down";
let lastScroll = 0;

window.addEventListener("scroll", () => {
	const currentScroll = window.pageYOffset;
	if (currentScroll <= 0) {
		body.classList.remove(scrollUp);
		return;
	}

	if (currentScroll > lastScroll && !body.classList.contains(scrollDown)) {
		// down
		body.classList.remove(scrollUp);
		body.classList.add(scrollDown);
		lottiePlayer.play();
	} else if (
		currentScroll < lastScroll &&
		body.classList.contains(scrollDown)
	) {
		// up
		body.classList.remove(scrollDown);
		body.classList.add(scrollUp);
	}
	lastScroll = currentScroll;
});
</script>