Domů / Sticky navigace / Odhalování navigace při scrollingu nahoru

Odhalování navigace při scrollingu nahoru

Návštěvník scrolluje dolů — navigace zmizí. Scrolluje nahoru — vrátí se. Elegantní řešení, které uživatele neotravuje.

8 min čtení Pokročilé Březen 2026

Tomáš Volárik

Senior Frontend Architect

Frontend architect s 14 lety zkušeností v designu responzivních navigačních systémů pro české firmy a globální projekty.

Proč se navigace skrývá?

Když uživatel scrolluje dolů stránkou, máme dvě možnosti. Nechat navigaci na místě — a zabírá místo, které by mohl obsah využít. Nebo ji schovat a vrátit ji zpátky, když se uživatel vrací nahoru. To druhé? Moc lepší zážitek.

Odhalování navigace při scrollingu nahoru se stalo standardem pro weby, které si respekt zaslouží. Není to jen elegantní — je to praktické. Uživatel dostane více místa na obsah, když jej čte. Navigace se vrátí přesně v okamžiku, kdy ji potřebuje.

Sketchbook s návrhy navigačních prvků a anotacemi

Detekce směru scrollování

Jádro celého řešení spočívá v detekci, jestli uživatel scrolluje nahoru nebo dolů. Nejjednoduší přístup? Sledovat předchozí pozici a porovnávat ji s aktuální.

Uložíte si hodnotu posledního Y-pozice okna. Při každém scroll eventu ji porovnáte s novou pozicí. Pokud je nová pozice vyšší — scrolluje nahoru. Pokud je nižší — scrolluje dolů. Hned víte, co dělat.

Klíčový koncept: Detekce funguje na scroll eventu. Nemusíte třídit scroll direction skrz JavaScript — CSS puede handling visibility dělat podle toho, jakou CSS třídu přidáte HTML elementu.

Monitor s webovou stránkou zobrazující navigační prvky a scroll pozici

Mobilní telefon s responzivní navigací a scrollovacím chováním

Implementace s CSS transformacemi

Když víte, jestli se scrolluje nahoru nebo dolů, můžete navigaci pohybovat pomocí CSS transformací. Nejjednodušší: translate3d na Y ose. Když se scrolluje nahoru, translace je 0 — navigace viditelná. Když dolů, translace je záporná — navigace se posunuje ven z obrazovky.

Proč CSS transformace? Jsou hardware-accelerované. Neblokují rendering. Animace běží hladce i na starších telefonech. Scrollování zůstane hladké.

Přidáte transition: transform 0.3s ease-out. Navigace se neobjeví okamžitě — plynule se vrátí do pohledu během třetiny sekundy. Vypadá to přirozeně a není to rušivé.

Kdy by navigace měla zůstat viditelná?

Není vždy chytré schovávat navigaci. Když se uživatel nacházíte v horní části stránky — prvních 100-150 pixelů — navigace by měla být viditelná. Ať si ji prohlédne. Nemá smysl ji schovat, když už je tam kde chce být.

Taky: když se uživatel dostane na konec stránky (footer), vraťte navigaci zpátky. Tam už ji vidí stejně. Není důvod ji schovávat.

Klíčová pravidla:

Při scroll dolů menší než 150px — navigace viditelná
Při scroll nahoru jakékoliv množství — navigace viditelná
Při scroll dolů více než 150px — navigace se schovává
V dolní 20% stránky — navigace se vrací, ať scrollujete jak chcete

Návrh webové stránky s sticky navigací a optimalizovanou obsahu

Optimalizace výkonu

Scroll event se spouští mnohokrát za sekundu. Pokud máte těžkou logiku uvnitř scroll handleru, zpomalíte celou stránku. Jedno pravidlo: throttle. Spouštějte detekci pouze jednou za určitý čas — třeba každých 50 milisekund.

Throttling tip: Používejte requestAnimationFrame. Synchronizuje se s refresh rate obrazovky. Na 60Hz displeji to znamená ~16ms, což je bezpečné a hladké.

Druhá věc: neaktualizujte DOM neustále. Změňte CSS třídu jednou, když se direction změní. Pak nechte CSS přechodem pracovat. Nemanipulujte inline styly na každý scroll event.

Důležité poznámky

Tento průvodce poskytuje informační materiál a nejlepší praktiky pro vývoj navigačních systémů. Konkrétní implementace se liší podle vašeho konkrétního projektu, technologického stacku a požadavků na přístupnost. Každý projekt má jiné potřeby — testujte vždy s vašimi skutečnými uživateli a jejich zařízeními. Přístupnost je důležitá — ujistěte se, že navigace zůstane dostupná pro klávesnicové uživatele a čtečky obrazovky.

Shrnutí: Elegantní navigace

Odhalování navigace při scrollingu nahoru není jen módní trend. Je to praktické řešení, které dělá webové stránky příjemnějšími k používání. Uživatel dostane více místa na obsah, když jej čte. Navigace se vrátí přesně v okamžiku, kdy ji potřebuje.

Klíč? Správná detekce směru scrollování, hladké CSS transformace a rozumné pravidla pro to, kdy navigaci schovávat. Není to složité — je to jen správná kombinace JavaScript detekce a CSS animací.

Když to uděláte správně, uživatelé si to ani neuvědomí. Pro ně bude navigace jen tam, kde ji potřebují. A to je přesně to, na co se snažíte.