CSS SCROLL STATE

スクロール後のヘッダーをCSSだけで切り替える

scrollイベントでclassを付けずに、ページが少しスクロールされた状態へ反応する。新しいscroll-state queryのデモです。

Scroll to demo Chrome 133+

Try scrolling

上から少しスクロールすると、ヘッダーが変わります

Top

透明で大きめ

最上部では、ヘッダーは余白を広く取り、背景をほとんど見せません。

Scrolled

背景と影を追加

スクロール後は、読みやすいように背景、blur、shadowを付けます。

CSS only

JSなしで判定

scroll-state queryで、スクロール後の状態をCSSから見ています。

CORE CSS

見ているのは、上方向へスクロールできる状態

ページが下へスクロールされると、上方向へ戻れる状態になります。その状態を `scrollable: top` で見て、ヘッダー内側の見た目を変えています。

html {
  container-type: scroll-state;
  container-name: page;
}

.site-header {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
}

@container page scroll-state(scrollable: top) {
  .header-inner {
    padding-block: 10px;
    background: rgb(255 255 255 / 82%);
    box-shadow: 0 16px 50px rgb(24 33 29 / 16%);
    backdrop-filter: blur(18px);
  }
}

Note

scroll-state queries are new. This demo is intended as an experimental CSS demo. For production, check browser support and provide a fallback.

Header states without scroll events

スクロール位置に応じた見た目の切り替えは、これまでJavaScriptでclassを付けることが多い表現でした。

Container query for scroll state

scroll-state queryは、コンテナのスクロール状態を見て、その子孫へスタイルを当てられます。

Small CSS, visible change

ヘッダーの背景や影が変わるだけでも、UIの印象はかなり変わります。