What it is: scroll-state queries let CSS know if an element is currently stuck, snapped or scrollable. Before this you needed JavaScript with a scroll listener to add a class like is-sticky. Now CSS can do it alone.

Add a shadow only when the header is stuck

<div class="lotgrafix-sticky">
    <header class="lotgrafix-header">Site header</header>
</div>

css">.lotgrafix-sticky {
    position: sticky;
    top: 0;
    container-type: scroll-state;
}

.lotgrafix-header {
    background: #fff;
    transition: box-shadow 0.3s ease;
}

@container scroll-state( stuck: top ) {
    .lotgrafix-header {
        box-shadow: 0 2px 12px rgba( 0, 0, 0, 0.2 );
    }
}

The sticky element is the container, and the styles are applied to its children.

Available states

• stuck: a sticky element is stuck to an edge. Values: top, bottom, left, right.
• snapped: an element is snapped by CSS Scroll Snap.
• scrollable: the container can still be scrolled in a direction.

Support note

Scroll-state queries currently work in Chromium based browsers only. Treat them as an enhancement and keep the basic header style working without them. If you need it everywhere, use the JavaScript sticky header from the Js category.