Chytrá komponenta
Sticky header
Hlavička, která při skrolování zůstane nahoře, zmenší se a dostane stín. Obsahu tak nechá víc místa.
Jen CSS, bez JavaScriptu. Skrolujte přímo v náhledu a sledujte hlavičku.
Struktura
Hlavička a dlouhý obsah
Hlavička s logem a navigací, pod ní článek. Obsahu je hodně, aby bylo v náhledu co skrolovat.
Skrolujte v náhledu: hlavička zatím odjede nahoru se zbytkem stránky.
Sticky
Hlavička zůstane nahoře
position: sticky se chová jako obyčejný blok, dokud by neodjel z obrazovky. Pak se přilepí k místu, které určí top.
Pozadí je nutné. Bez něj by text článku prosvítal skrz hlavičku.
Styl
Velkorysá hlavička
Na začátku stránky má hlavička dost prostoru a velké logo. To je první dojem z webu.
Vychytávka
Animace podle skrolování
Animace se obvykle přehrává v čase. S animation-timeline: scroll() ji místo hodin řídí skrolování: během prvních 150 pixelů skrolování se hlavička a logo zmenší.
animation-timeline musí být až za zkratkou animation, jinak ho zkratka přepíše. Kde prohlížeč tuhle novinku neumí, hlavička zůstane sticky, jen se nezmenší.
Styl
Stín a průsvitné pozadí
Do stejné animace přidáme stín, který hlavičku oddělí od obsahu, a pozadí, které po odskrolování zprůsvitní. backdrop-filter text pod ním rozmaže jako matné sklo.
Čáru pod hlavičkou jsme vyměnili za stín. Na začátku stránky stín není, objeví se až s posunem.
Ohleduplnost
Pro ty, komu pohyb vadí
Některým lidem je z animací na obrazovce špatně. V nastavení systému si proto mohou pohyb omezit. Media query prefers-reduced-motion to pozná a my animaci vypneme.
Hlavička je pro ně pořád sticky, jen se nemění. Media query se neptá jen na šířku obrazovky, ale i na nastavení uživatele.
Automatika
Na telefonu menu pod logem
Na úzké obrazovce se logo a menu vedle sebe nevejdou. Dáme menu pod logo a zmenšíme padding. Animace funguje dál.
Na telefonu je místo na výšku ještě vzácnější. Pro velké menu se hodí menu s hamburgerem.
Recept
Sticky header v kostce
position: sticky+top: 0+ pozadíanimation-timeline: scroll(): animace řízená scrollbaremanimation-rangeurčí, na jakém úseku skrolování se animace odehraje- vždy myslete na
prefers-reduced-motion