v149 · CSS

Sticky Nav Awareness

A sticky page header that detects when it is pinned at the top of the viewport and restyling itself — smaller logo, visible border, subtle shadow — using only @container scroll-state(stuck: top). No JavaScript.

STUCK

Scroll down to pin the nav

When the header reaches the top of this scroll frame, scroll-state(stuck: top) fires and the CSS transitions apply automatically.

Article: Container Queries Evolved

Scroll state queries let you respond to scroll-related conditions that previously needed JavaScript. The browser already tracks whether a sticky element is pinned — now you can query it.

Article: Zero-JS Sticky Headers

Before this feature, changing a header's appearance when stuck required a scroll event listener, an IntersectionObserver watching a sentinel element, and manual class toggling — all off-by-one frames.

Article: The Transition Details

The container-type: scroll-state value is applied to the sticky element itself (or a wrapper), not to its scroll container. The browser queries propagate inward to its children.

Article: Browser Support

CSS Scroll State Container Queries shipped in Chrome 149. Firefox and Safari have not shipped it yet. Use @supports (container-type: scroll-state) as a progressive-enhancement guard.

↑ scroll back up to unstick the header

/* 1. Mark the sticky element as a scroll-state container */
.sticky-sentinel {
  container-type: scroll-state;
  container-name: sticky-header;
  position: sticky;
  top: 0;
}

/* 2. Base (not-stuck) styles — transparent, full padding */
.page-header {
  background: transparent;
  padding: 1.25rem 1.5rem;
  transition: background 0.25s, padding 0.25s;
}

/* 3. Query the stuck state — applies when pinned at the top */
@container sticky-header scroll-state(stuck: top) {
  .page-header {
    background: var(--bg-paper);
    border-bottom: 2px solid var(--border-black);
    padding: 0.65rem 1.5rem;
  }
}

see also

scenario focus

Select a scenario to focus its rendered example and summary.

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗