Sticky shrink-on-scroll header

Header is tall and transparent at top, then shrinks AND becomes a glassy dark bar on scroll. Premium space-saving.

Navigation Captured Tiny JS

Use when — long pages where the header should command attention at top but politely retreat once the user starts reading. The shrink frees ~16px of vertical space below the fold while keeping the brand visible. Variant of the basic sticky-scroll-aware nav.

Live demo

Scroll inside the frame — the header collapses from 72px to 56px and the logo shrinks too.

InicioCartaContacto

Hero section

Scrolled content

Notice the header above became compact and glassy.

The logo on the left shrunk a few pixels too.

The transition between the two states uses the same easing curve so they feel coordinated.

Filler content. Filler content. Filler content.

More content. More content. More content.

The CSS — header shrinks AND restyles

:root { --header-h: 72px; --header-h-scrolled: 56px; }

.site-header {
  position: sticky;
  top: 0;
  height: var(--header-h);
  background: linear-gradient(180deg, rgba(20,20,20,0.55) 0%, rgba(20,20,20,0) 100%);
  transition:
    background 320ms var(--ease-out-quart),
    height 320ms var(--ease-out-quart),
    box-shadow 320ms;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  height: var(--header-h-scrolled);
  background: rgba(20, 20, 20, 0.78);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom-color: rgba(255,255,255,0.08);
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}

/* logo shrinks too */
.site-header.is-scrolled .brand-logo { height: 32px; }

The JS — same 6 lines as the basic sticky-aware nav

const header = document.querySelector('.site-header');
window.addEventListener('scroll', () => {
  header.classList.toggle('is-scrolled', window.scrollY > 30);
}, { passive: true });

Variants worth considering

Hide on scroll-down, show on scroll-up — track previous scroll position; if user scrolls down, slide the header up off screen. On scroll-up, slide it back in. Maximum content space without losing access.

Compact mode triggers earlier on mobile — bump the threshold to scrollY > 10 on small screens since every pixel matters.

backdrop-filter compatibility — Safari needs the -webkit- prefix. Older Android browsers fall back to a more opaque solid (which still looks fine).

Source: Chevy 55 sticky header (user-uploaded HTML, 2026-05-18). Builds on Pattern 2 in the playbook.