Scroll - Header Shadow

Update a component appearance based on the user’s scroll action, all CSS, no JS required.

Demo
HTML
CSS
JS
Baseline
CodePen

Demo

The Incredible Scrolled Header Shadow

...

HTML

<!-- No special HTML, just need a header to add a drop-shadow to -->
<header>
  <h1>The Incredible Scrolled Header Shadow</h1>
</header>

<!-- And enough content to allow the page to scroll -->
<article>
  ...
</article>

CSS

/* Identify the scroll container */
html {
    container-type: scroll-state;
}
/* Add this CSS if the users scrolls at all */
@container scroll-state(scrollable: top) {
  header {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  }
}

JS

No JS required.

Baseline

[`container-scroll-state-queries`](https://webstatus.dev/features/container-scroll-state-queries)

CodePen

See the Pen on CodePen.