Jednotránkové weby
Pokročilý
12 min čtení
Stavba sticky navigace, která funguje bez problémů
Návod krok za krokem, jak vytvořit navigaci, která zůstane viditelná při scrollování a správně zvýrazní aktuální sekci. Všechny techniky, které budete potřebovat.
Proč sticky navigace není triviální
Sticky navigace — neboli přilepená navigace — se stala standardem moderních webů. Když si návštěvník otevře vaši jednotránkovou stránku a začne scrollovat dolů, navigace by měla zůstat přístupná. Není to jen otázka komfortu. Je to o tom, že lidé chtějí vědět, kde se nachází.
Problém je, že když implementujete sticky navigaci špatně, zůstane vám na obrazovce mrzutý kousek, který překrývá obsah. Nebo se bude chovat divně na mobilech. Nebo — a to se děje často — nebude správně zvýrazňovat, která sekce je právě viditelná. Věřte mi, že návštěvníci to poznají.
Základy: CSS position sticky
Nejjednoduší cesta začíná s CSS vlastností
position: sticky
. Narozdíl od
position: fixed
, která prvek vysekne z toku dokumentu a připne ho na obrazovku, sticky funguje chytřeji. Prvek se chová normálně, dokud se nedostane k hornímu okraji viewportu. Pak se “přilepí” a zůstane viditelný při scrollování — ale jen v rámci svého nadřazeného kontejneru.
Syntax je jednoduchá. Stačí nastavit
position: sticky; top: 0;
na váš prvek. Otázka je, jak to dělat správně, aby to fungovalo na všech zařízeních a nevytvářelo vám problémy s layoutem.
Tip:
Sticky navigace potřebuje svůj vlastní kontejner, který se nechová divně. Neměla by být součástí jiného prvku s
overflow: hidden
, protože to sticky nefunguje.
Scroll-spy: Automatické zvýrazňování
Sticky navigace je jednou věcí. Ale chcete, aby se také zvýrazňovala správná položka menu? To je scroll-spy a bez ní vypadá vaše navigace jako slepá. Návštěvník scrolluje dolů a nemá vůbec tušení, kde se nachází.
Scroll-spy funguje tak, že sleduje, která sekce je právě viditelná na obrazovce, a zvýrazní odpovídající položku v menu. Implementovat to můžete pomocí JavaScriptu — a musíte být opatrní na výkon. Když máte velkou stránku s mnoha sekcemi, scroll event se vyzývá tisícikrát za sekundu. To potřebuje throttling, jinak vám to zpomalí celou stránku.
Jak to dělat správně:
- Definujte якory pro jednotlivé sekce (ID na section elementech)
- V menu odkažte na tyto якory (href=”#sekce-1″)
- Implementujte Intersection Observer API místo scroll event
- Když se prvek dostane do viewportu, přidejte třídu “active” na odpovídající menu item
Praktická implementace bez problémů
Nejlepší přístup? Kombinovat CSS sticky s Intersection Observer API. Tím se vyhneete všem výkonnostním problémům a vaše navigace bude fungovat hladce i na starších telefonech.
Struktura HTML je jednoduchá. Máte `nav` prvek s položkami, z nichž každá je odkaz na sekci. Každá sekce má vlastní ID. CSS nastaví navigaci na sticky, a JavaScript sleduje, která sekce je viditelná. Když se návštěvník dostane do nové sekce, JavaScript přidá třídu “active” na odpovídající menu item a odebere ji ze starého.
Klíčové pozorování: Nemusíte se spoléhat na scroll event. Intersection Observer je mnohem elegantnější a nebere to procesor. Je to jako postřehnout, kdy prvek vejde do výhledu, místo aby se neustále ptalo “Kde jsem teď?”
Sticky navigace na mobilech
Na mobilních zařízeních je sticky navigace ještě důležitější — ale také náročnější. Obrazovka je malá, a když si vezměte 60 pixelů pro navigaci, zbyde vám už jen málo místa na obsah. Řešení? Odpověď není nová, ale je účinná.
Možnost první: Zmenšete navigaci na mobilech. Použijte hamburger menu. Je to běžné, návštěvníci to znají. Možnost druhá: Změňte orientaci. Místo horizontálního menu nahoře si vezměte vertikální. Nebo jednoduše zmenšete písmo a padding v navigaci na 70 procent velikosti na desktopu.
Nejdůležitější je testování. Vezměte si skutečný telefon — ne jen simulátor v prohlížeči — a scrollujte přes vaši stránku. Vidí se menu? Je čitelné? Neblokuje obsah? To jsou otázky, které si musíte položit.
Autor
Tomáš Novotný
Senior Frontend Designer a vedoucí tým UX
Seniorní frontend designer se 14 lety praxe v designu jednotránkových webů, vedoucí tým UX v Scroll Flow s.r.o.
Související články
Organování obsahu v kontinuálním toku
Strategické řešení pro strukturování veškerého obsahu na jedné stránce tak, aby návštěvník plynule procházel všemi sekcemi.
Přečíst článek
Vizuální dělení sekcí — co funguje nejlépe
Přehled různých technik pro oddělení sekcí na jednotránkovém webu, od barev přes pozadí až po subtilní linie.
Přečíst článekPrávní poznámka
Obsah tohoto článku je poskytován pouze pro informační a vzdělávací účely. Techniky a metody zde popsané jsou základem pro porozumění principům sticky navigace a scroll-spy implementace. Konkrétní implementace se bude lišit v závislosti na architektuře vašeho webu, požadavcích na kompatibilitu a specifických potřebách vašeho projektu. Doporučujeme provést důkladné testování na všech cílových zařízeních a prohlížečích. Autoři nejsou odpovědní za případné chyby nebo neočekávané chování vyplývající z implementace zde uvedených technik.