Responzivní hamburger menu — mobil a tablet
Na malých obrazovkách potřebujete jiný přístup. Jak udělat menu, které se chová intuitivně a nezabírá místo.
Zmenšování headeru při scrollování — kdy a jak
Technika, kterou používají velké e-shopy. Ušetří místo na obrazovce a vypadá profesionálně, pokud ji uděláte správně.
Proč vůbec zmenšovat header?
Na desktopu máte místo nazbyt. Header o výšce 120 pixelů není problém — je tam logo, navigace, koupit do košíku. Všechno se vejde. Ale když uživatel scrolluje dolů a čte váš článek nebo prohlíží produkty, fixní header zabírá 10 procent obrazovky. To je hodně.
Na mobilech je to horší. 120 pixelů fixního headeru z 667pixelové obrazovky je skoro 18 procent. Zmenšit header během scrollování znamená vrátit obsah uživateli a zároveň ponechat navigaci v dosahu.
Jak to technicky funguje
Zmenšování headeru je ve skutečnosti jednoduchý JavaScript — posloucháte event scrollování a měníte výšku headeru nebo jeho transform. Když uživatel scrolluje dolů, header se zmenší z 120 pixelů na 70 pixelů. Logo se zmenší, mezery kolem textu se zúží, ale navigační menu zůstane klikatelné.
Nejčastější přístup: Poslouchejte scroll event. Když scrollPosition > nějaký threshold, přidejte CSS třídu na header, která změní výšku, padding a font-size. Přechod dělá CSS transition — je hladký a nerušivý.
Můžete taky použít CSS sticky positioning bez JavaScriptu, ale máte méně kontroly. Header bude vždy stejně velký — prostě jen zůstane nahoře. Proto se pro dynamické zmenšování používá JavaScript.
Kdy to uděláte správně
Není to jen o kódu. Je to o tom, aby se to chováním cítilo přirozené. Uživatel by neměl vidět skákání nebo blikání. Přechod by měl trvat mezi 150 a 300 milisekundami — ani příliš pomalý, ani příliš rychlý.
1
Definujte dva stavy
Výška normálního headeru (třeba 100px) a výška zmenšeného headeru (třeba 60px). Rozhodněte, který obsah zůstane viditelný.
2
Nastavte threshold
Od kterého pixelu scrollu se má header zmenšit. Často se to dělá na 100 pixelech dolů — uživatel je už mimo hero sekci a čte obsah.
3
Přidejte CSS třídu dynamicky
JavaScript přidá třídu na header (třeba is-shrunk), která změní výšku, padding a font-size. CSS transition dělá přechod hladký.
Praktické detaily, které se zapomínají
Všichni zapomínají na malé věci. Když se header zmenší, obsah pod ním se posunou nahoru. To je správně. Ale co když je na stránce anchor link (třeba #kontakt)? Když na něj uživatel klikne a stránka scrolluje na tu sekci, header už je menší. Link ale počítá s původní výškou headeru a obsah se bude překrývat.
Vždy počítejte s scroll-margin-top na elementech, na které linkujete. Nebo lépe — scroll-padding-top na html. Tak obsah nikdy nebude pod headerem.
Druhá věc: animace. Některé weby používají requestAnimationFrame místo scroll eventů. Je to lepší pro výkon — browser nemusí počítat při každém pixelu scrollu. Ale zbytečně to komplikuje kód. Scroll event s throttlingem je přijatelný.
Kdy to NEDĚLÁTE
Zmenšování headeru není vždy správné řešení. Na některých webech to prostě nepatří.
- Single page aplikace — Pokud je váš web SPA s moderním routingem, scroll efekty se chovají divně. Raději nechte header fixní a minimalizujte jeho obsah.
- Krátké stránky — Pokud je obsah tak krátký, že uživatel scrolluje jen o 200 pixelů, header se nestihne ani zmenšit. Zbytečné.
- Weby s bannerem — Pokud máte promo banner pod headerem (třeba “Sleva 30%”), zmenšování headeru to překomplikuje.
- Mobilní aplikace webová verze — Pokud se snažíte vypadat jako aplikace, fixní header je OK. Dynamické zmenšování to ruší.
Poznámka k implementaci
Tento článek poskytuje informační návod na implementaci sticky headerů s dynamickým zmenšováním. Skutečná implementace se bude lišit v závislosti na vaší architektuře, frameworku a specifických požadavcích. Testujte vždy na reálných zařízeních a při různých připojení. Výkon je důležitější než vizuální efekty.
Shrnutí
Zmenšování headeru je jednoduchý, ale efektivní trik. Vrací prostor uživateli a vypadá profesionálně. Nemusíte to přehánět — jde jen o 30–50 pixelů rozdílu mezi normálním a zmenšeným stavem. JavaScript detekuje scroll, CSS transition dělá přechod hladký, a výsledek je mnohem lepší UX.
Ale pamatujte: není to pro každý web. Testujte s reálnými uživateli a vidíte, jestli jim to pomáhá nebo ruší.
