Scroll-spy zvýraznění pro perfektní orientaci
Jak na JavaScript kód, který automaticky zvýrazní položku menu na základě toho, kterou sekci právě čtete.
Co je to scroll-spy?
Scroll-spy je technika, která automaticky sleduje pozici čtenáře na stránce a zvýrazňuje odpovídající položku v navigaci. Když se čtenář posouvá dolů a dostane se ke třetí sekci, aktivní položka v menu se sama změní na třetí položku. To jsou ty ty chvíle, kdy si návštěvník myslí „aha, vím přesně kde jsem na stránce”.
Je to užitečné zejména na jednotránkových webech, kde máte obsah organizovaný do sekcí a chcete, aby měli uživatelé vždycky přehled o tom, kde se právě nacházejí. Scroll-spy pracuje bez toho, aby museli klikat na navigaci — prostě se čtou a menu se samo aktualizuje.
Proč to používat?
- Zlepšuje orientaci uživatele na stránce
- Vytváří dojem moderního a kvalitního webu
- Pomáhá s SEO — Google vidí jasnou strukturu obsahu
- Funguje bez klikání — čistě na scrollování
Jak scroll-spy technicky funguje
Scroll-spy se opírá o kombinaci HTML, CSS a JavaScriptu. HTML poskytuje strukturu — každá sekce má své ID. CSS pak vizuálně označuje aktivní položku (obvykle změnou barvy nebo přidáním tlustšího rámečku). JavaScript pak dělá tu „chytrou” práci.
JavaScript neustále poslouchá událost
scroll
. Když se stránka posune, zkontroluje, která sekce je právě viditelná v okně prohlížeče (pomocí metody
getBoundingClientRect()
). Jakmile zjistí, která sekce je aktivní, aktualizuje CSS třídu na odpovídající položku v menu.
Nejčastěji se to implementuje takto: každé menu má data-atribut, který odkazuje na ID sekce. Když je sekce viditelná, JavaScript přidá třídu
active
na příslušnou menu položku.
Praktická implementace
Základní implementace je překvapivě jednoduchá. Potřebujete HTML strukturu, kde každá sekce má ID a každá navigační položka má data-atribut odkazující na to ID.
V JavaScriptu pak vytvoříte funkci, která zjistí, která sekce je v okně viditelná. Nejjednoduší přístup je projít všechny sekce a kontrolovat jejich pozici vůči hornímu okraji okna. Když najdete aktivní sekci, přidáte třídu
active
na odpovídající menu položku a odstraníte ji ze všech ostatních.
Mnozí vývojáři používají knihovnu jako Intersection Observer API, která je modernější a výkonnější. Umožňuje vám sledovat, kdy prvek vstoupí nebo opustí viditelnou oblast okna bez neustálého sledování scroll událostí.
Jaký přístup zvolit
Máte v zásadě tři možnosti. První je klasický event listener na scroll — jednoduché, ale méně efektivní, protože se kód spouští pokaždé, když se stránka posune o pár pixelů. Druhá možnost je Intersection Observer API — moderní, efektivní a jednoduchý na používání. Třetí je knihovna typu Smooth Scroll nebo AOS, která to řeší za vás.
Pro menší projekty se vypořádáte s klasickým scroll event listenarem bez problémů. Pokud máte ale ambiciózní stránku s mnoha sekcemi, doporučuji Intersection Observer. Je to nativní API, nepotřebujete žádné závislosti a výkon je výrazně lepší.
Průměrně se scroll-spy implementuje za 30-45 minut, když víte, co děláte. Bez zkušeností to může trvat i hodinu a půl, ale i to se vyplatí.
Užitečné tipy a triky
Optimalizace výkonu
Pokud máte scroll listener, přidejte throttling — to znamená, že se kód nespouští na každý scroll event, ale třeba jen jednou za 100 milisekund. Výkon stránky se zlepší znatelně.
Plynulé přechody
Když se aktivní třída změní na navigační položku, dodejte jí CSS transition. Barva nebo podtržení se bude měnit plynule místo skokového přepínání, což vypadá lépe.
Mobilní navigace
Na mobilu se navigace často skrývá v hamburger menu. Scroll-spy funguje stejně, ale musíte myslet na to, že menu není vždy viditelné. Někdy je dobré přidat indikátor pozice jinak — třeba barevný pruh nahoře.
Offset pro fixed header
Pokud máte fixed header (navigace přilepená nahoře), musíte v scroll-spy kódu počítat s jeho výškou. Jinak se bude zdát, že aktivní položka je o kousek vedle. Přidejte offset rovný výšce headeru.
Klikání na menu
Když uživatel klikne na navigační položku, měla by stránka plynule přejít na danou sekci. Použijte
scroll-behavior: smooth;
v CSS. Scroll-spy pak zaznamená pohyb a aktualizuje se.
Testování
Testujte scroll-spy na skutečných zařízeních — na mobilech, tabletů a desktopu. Chování se může lišit. Zkontrolujte taky, jak se chová v různých prohlížečích, zvláště v Safari.
Závěr
Scroll-spy zvýraznění není náročné na implementaci a přinese vám spoustu hodnoty. Vaši návštěvníci budou vědět, kde na stránce jsou, a to jim dá pocit kontroly. Na jednotránkových webech to vytvořit profesionální dojem a zlepšit navigaci bez zbytečného klikání.
Začněte s jednoduchým přístupem — scroll event listener nebo Intersection Observer API. Jakmile to bude fungovat, můžete přidat plynulé přechody, optimalizace a vylepšení. Nejdůležitější je, aby to fungovalo a vypadalo hezky.
Pokud se vám teď chce zkusit to hned implementovat, je to skvělý nápad. Nejlépe se to naučíte tím, že si to sami zkusíte. A když vám to poprvé nebude fungovat, to je v pořádku — kódu se učíme skrze chyby.
Důležité poznámky
Informace v tomto článku jsou určeny k vzdělávacím účelům. Každý projekt je jiný a může vyžadovat vlastní řešení. Vždycky testujte váš kód v reálných podmínkách a ověřte si kompatibilitu s vašimi cílovými prohlížeči. Pokud pracujete s klientem, komunikujte o výkonu a požadavcích před implementací. Kód uvedený v příkladech je zjednodušený — v produkčním prostředí zvažte bezpečnost, výkon a dostupnost.
