hiding-header/dist/style.css

Toggles header visibility on scroll.

.hidingHeader {
	position: relative;
	--hidingHeader-height: auto;
	--hidingHeader-bounds-height: auto;
	--hidingHeader-animation-offset: 0px;
	z-index: 10;
	height: var(--hidingHeader-bounds-height);
	margin-bottom: calc(
		var(--hidingHeader-height) - var(--hidingHeader-bounds-height)
	);
	pointer-events: none;
}

.hidingHeader-in {
	position: relative;
	position: sticky;
	top: 0;
	pointer-events: auto;
	transition: transform 0.2s;
	transform: translateY(var(--hidingHeader-animation-offset));
}

@media (prefers-reduced-motion) {
	.hidingHeader-in {
		transition-duration: 1ms;
		transition-timing-function: step-end;
	}
}