liquiddesign

Wzorzec 27

Sticky, który wie, że przywarł

Nagłówek sticky potrzebuje cienia dopiero wtedy, gdy naprawdę przywrze do krawędzi, ale position: sticky nie zdradza swojego stanu. Dotąd odpowiadał na to IntersectionObserver z elementem-strażnikiem i klasą dokładaną w JavaScript. Kontener scroll-state oddaje ten stan czystemu CSS: zapytanie scroll-state(stuck: top) włącza style dokładnie w klatce dokowania.

Nagłówek, który zna swój stan

Przewiń zawartość ramki. Gdy nagłówek przywrze do górnej krawędzi, dostaje tło, ramkę i cień, a etykieta stanu się zmienia. Wszystko włącza zapytanie scroll-state(stuck: top), w tym demo nie ma ani linii JavaScript.

Zasady stabilności

○ płynie z treścią● przywarł do krawędzi

Rezerwacja miejsca to pierwsza zasada stabilności: kontener na treść asynchroniczną istnieje od pierwszego renderu i trzyma wysokość niezależnie od tego, kiedy dotrą dane.

Skeleton ma sens tylko wtedy, gdy dzieli geometrię z treścią, którą zapowiada. Jeden komponent w dwóch stanach zamiast osobnego pliku ze zgadywanymi prostokątami.

Slot na komunikat błędu czeka pod polem od początku. Pojawienie się walidacji nie przesuwa ani pola, ani przycisku, ani niczego pod formularzem.

Płynna typografia rośnie liniowo między ekranami referencyjnymi. Breakpoint jest ostatecznością, nie pierwszym narzędziem.

Styl przyklejenia zmienia tylko kolory i cień, nigdy wymiary, więc dokowanie niczego nie przesuwa. Bez wsparcia scroll-state nagłówek dalej jest zwykłym sticky z etykietą stanu spoczynkowego.

Reguły

  • Element sticky deklaruje container-type: scroll-state, a style przyklejenia włącza @container scroll-state(stuck: top) na jego potomkach.
  • Styl przyklejenia zmienia cień, tło i kolory, nigdy wymiary, więc dokowanie niczego nie przesuwa.
  • Bez wsparcia nagłówek dalej jest zwykłym sticky, dodatkowy styl to progresywne ulepszenie.
  • IntersectionObserver zostaje tylko tam, gdzie stan przyklejenia musi znać JavaScript, nie stylowanie.

Wzorzec w kodzie

Stan przyklejenia czyta container query
.naglowek {
  position: sticky;
  inset-block-start: 0;
  container-type: scroll-state;
}

@container scroll-state(stuck: top) {
  .naglowek-panel {
    background-color: var(--surface-raised);
    box-shadow: 0 12px 24px rgb(0 0 0 / 0.45);
  }
}
Antywzorzec: element-strażnik i klasa dokładana skryptem
const sentinel = document.querySelector(".straznik");
new IntersectionObserver(([entry]) => {
  header.classList.toggle("przywarl", !entry.isIntersecting);
}).observe(sentinel);

Prompt dla Claude

Wklej do Claude Code w swoim projekcie. Prompt niesie komplet reguł tej lekcji i ogólne zasady Liquid Design, więc implementacja trafia w metodologię bez tłumaczenia jej od zera.

Prompt do wklejenia
Zaimplementuj w moim projekcie wzorzec „Sticky, który wie, że przywarł" z metodologii Liquid Design.

Container query scroll-state(stuck) styluje przyklejony nagłówek w czystym CSS, bez IntersectionObserver i klas dokładanych skryptem.

Wymagania:
- Element sticky deklaruje container-type: scroll-state, a style przyklejenia włącza @container scroll-state(stuck: top) na jego potomkach.
- Styl przyklejenia zmienia cień, tło i kolory, nigdy wymiary, więc dokowanie niczego nie przesuwa.
- Bez wsparcia nagłówek dalej jest zwykłym sticky, dodatkowy styl to progresywne ulepszenie.
- IntersectionObserver zostaje tylko tam, gdzie stan przyklejenia musi znać JavaScript, nie stylowanie.

Ogólne reguły Liquid Design, których implementacja nie może złamać:
- HTML jest semantyczny: button, a, nav, form, label, dialog, details, ul, dl i nagłówki h1-h6 zamiast div z onClick i ARIA dopisywanym ręcznie. div i span służą wyłącznie do layoutu, nigdy do interakcji ani struktury treści.
- Layout jest umową: treść, która dociera później, ma miejsce zarezerwowane od pierwszego renderu. Nic nie skacze.
- Stany ładowania, pustki, błędu i treści dzielą jeden layout.
- Typografia pochodzi z nazwanej, płynnej skali opartej o clamp(), nie z gołych rozmiarów.
- Animacje dotyczą wyłącznie transform i opacity, a prefers-reduced-motion redukuje je do natychmiastowej zmiany stanu.
- Breakpoint jest ostatecznością: najpierw container queries i repeat(auto-fit, minmax(...)).

Sposób pracy — zanim napiszesz pierwszą linię kodu:
- Sprawdź w plikach projektu, jak stylowane są komponenty (Tailwind, CSS Modules, vanilla-extract, styled-components, Sass, czysty CSS...) i pisz wyłącznie w tej konwencji. Niczego nie zakładaj z góry i nie dodawaj nowych zależności.
- Wymagania powyżej opisują właściwości CSS i atrybuty HTML, nie klasy narzędziowe. Przełóż je na system stylowania zastany w projekcie.
- Sprawdź framework komponentów, wersję i konwencje nazewnictwa, zamiast zakładać konkretny stack.
- Używaj istniejących tokenów projektu (kolory, typografia, odstępy). Jeśli czegoś brakuje, zaproponuj minimalne uzupełnienie w duchu istniejącego kodu, nie osobny system.
- Nie używaj klas, tokenów ani API, których nie znalazłeś w tym projekcie.

Pełny opis z żywym demo i kodem: https://liquid-design.website/wzorce/sticky-swiadomy