Keep a header fixed at the top while scrolling. position: sticky pattern.
/* Sticky at top of viewport while scrolling */
.header {
position: sticky;
top: 0;
z-index: 50;
background: var(--header-bg);
}
/* Optional: add shadow when scrolled (needs JS or scroll-driven animation) */
.header {
position: sticky;
top: 0;
z-index: 50;
background: white;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}position: sticky and top: 0 (or any offset). Parent must allow scroll; the sticky element stays in flow until it hits top, then sticks.
Use z-index so the header stays above content. Solid background prevents content showing through.
position: sticky; top: 0; z-index: 50;