Zmenšování headeru při scrollování — kdy a jak
Návod na implementaci sticky hlavičky, která se zmenšuje při scrollování dolů a vrací se na původní velikost při scrollování nahoru. Včetně kódu a příkladů.
Senior Frontend Architect
NaviFlow s.r.o.
Specializuje se na design fixních a sticky navigačních prvků pro české webové aplikace. Optimalizuje chování hlaviček při scrollování, vytváří responzivní hamburger menu a zajišťuje, aby plovoucí navigační lišty neblokovali důležitý obsah.
Cesta od studia k vedení frontend projektů
Tomáš do webdesignu vstoupil během studií na ČVUT, kde se zaměřil na interaktivní prvky a jejich dopad na uživatelský zážitek. Už tehdy ho fascinovala otázka: jak se dají vytvořit navigační prvky, které jsou zároveň funkční a vizuálně elegantní? To ho vede dodnes.
Po absolvování Fakulty informačních technologií se pustil do praxe s jasným cílem — porozumět tomu, jak se webové aplikace chují v rukou skutečných uživatelů. Vedl desítky projektů pro české korporace, startupů i veřejné instituce. V každém z nich se setkával s podobnou výzvou: jak navrhnout navigaci, která nebude překážet, ale naopak usnadní orientaci.
Co jej na tomto oboru nejvíc fascinuje? Právě ta rovnováha. Navigace musí být nejen krásná — musí být intuitivní, přístupná a nesmí blokovat obsah, pro který se uživatel na web vrátil. Sticky prvky se staly jeho specialitou přesně proto, že vyžadují velmi pečlivé zvážení. Není to jen o kódu — je to o porozumění tomu, co uživatel potřebuje v každém okamžiku.
Své znalosti si rozšiřoval účastí na evropských konferencích o frontend vývoji a UX designu. Pozorně sleduje, jak se trendy vyvíjí, ale nehledí slepě za módem. Věří, že dobrá navigace nemá trendovat — měla by jednoduše fungovat lépe než ostatní.
Dnes vede tým frontend specialistů v agentuře NaviFlow s.r.o., kde se zaměřuje na to, aby sticky hlavičky a plovoucí navigační prvky nejen zvýšily konverze, ale zlepšily celkový uživatelský zážitek. Věří, že dobře navržená navigace je klíčem k úspěchu každého webu.
Bc. a Ing. na ČVUT Praha, Fakulta informačních technologií. Specializace: interaktivní webový design.
14 let v oboru. Vedení frontend týmů od roku 2014. Více než 50 ukončených projektů.
Sticky navigace, fixní hlavičky, scroll-based interakce, responzivní menu na všech zařízeních.
Kde se Tomáš věnuje nejvíce pozornosti
Design a implementace sticky navigačních prvků, které se přizpůsobují chování při scrollování bez toho, aby zakryly obsah.
Hamburger menu, overlay navigace a adaptivní řešení pro mobily a tablety. Bez kompromisů na UX.
Chytré skrývání a odhalování navigace na základě směru scrollování. Maximální prostor pro obsah.
Animace a transformace navigačních prvků synchronizované se scrollováním. Bez dopadu na performance.
CSS Grid, Flexbox, scroll-timeline, intersection observer. Vždy nejnovější přístup bez zbytečné komplexity.
Sticky prvky a navigace musí být přístupné všem. WCAG compliance bez kompromisů na design.
Jak Tomáš přemýšlí o designu navigace
Navigace není dekorace. Není to ani hlavní obsah webu. Je to most — prostředek, který vede uživatele tam, kam potřebuje jít. Každý prvek, který na něj přidáme, musí mít jasný účel.
Sticky prvky jsou jako pomocná ruka. Když je potřebuješ, měly by tam být. Když tě ruší, měly by zmizet. Nejhorší chyba je myslet si, že navigace musí být viditelná pořád a na všech místech. To je egoistické — myšlenkový pochod webdesignera, ne uživatele.
Tomáš se řídí jednoduchým pravidlem: Obsah je král, navigace je sluha. Sticky hlavička by nikdy neměla blokovat důležitý text, obrázek nebo call-to-action. To znamená, že někdy sticky prvky vůbec nejsou správná volba. A to je důležité si uvědomit.
Dobře navržená navigace je ta, kterou si uživatel ani nevšimne, dokud ji nepotřebuje.
V praxi to znamená:
Proč se věnuje právě českým projektům
Zná specifika českých uživatelů — jejich chování, zvyky, očekávání. To se nedá řídit jen z mezinárodních trendů.
České byznys webové aplikace mají specifické požadavky. Ví, co funguje u nás a co je zbytečné kopírování.
Není to jen práce. Chce, aby české weby byly na stejné úrovni jako ty mezinárodní. Osobně ho to zajímá.
Najdi více o sticky navigaci a fixních hlavičkách
Návod na implementaci sticky hlavičky, která se zmenšuje při scrollování dolů a vrací se na původní velikost při scrollování nahoru. Včetně kódu a příkladů.
Jak navrhnout hamburger menu, které funguje na všech zařízeních a neblokuje obsah. Overlay strategie a best practices.
Moderní přístup k sticky navigaci, která se chytře skrývá a odhaluje na základě směru scrollování. Maximální prostor pro obsah.
Strategie a kódy, které zajistí, aby sticky prvky neblokovali text, obrázky nebo CTA tlačítka. Bezpečné zóny a pravidla.
Chceš se dozvědět více o sticky navigaci a fixních hlavičkách?
Prohlédni si všechny článkyJak se s Tomášem spojit