Úvod
Text.
Implementace
Text.
Doporučení
Text.
Zvýraznění aktivní sekce při rolování
Moderní způsoby zvýraznění aktivní položky navigace podle aktuální sekce – CSS i IntersectionObserver.
5
minut
Scroll Spy je technika, která zvýrazňuje položku navigace podle toho, která sekce stránky je právě ve viewportu. Hodí se u jednostránkových layoutů, dokumentace i delších článků s obsahem.
Kdy použít
- Zpřehlednění dlouhých stránek a rychlá orientace v obsahu.
- Automatické zvýraznění odpovídající položky menu při scrollování.
CSS řešení (:target-current)
V Chrome 140+ je možné zvýrazňovat aktuální odkaz čistě v CSS. Navigaci stačí nastavit scroll-target-group: auto a stylovat :target-current.
.menu {scroll-target-group: auto}
.menu a:target-current {font-weight: bold}V ostatních prohlížečích se toto zvýraznění neprojeví.
Řešení v JS (IntersectionObserver)
V JavaScriptu funguje ve všech prohlížečích řešení s využitím IntersectionObserveru, který efektivně detekuje, zda jsou části stránky ve viewportu, bez poslouchání každé události scroll.
Je-li na stránce fixní hlavička, je dobré nastavit sekcím scroll-margin-top podle její výšky.
Odkazy
Co si myslíte o tomto článku?
Diskuse
Související články
CSS item-pack: balance – vyvážené rozložení flex položek
Vlastnost item-pack: balance rozděluje flex položky rovnoměrně mezi řádky, podobně jako text-wrap: balance vyvažuje řádky textu.
11
minut
CSS Container Queries – responsivní komponenty
Jak pomocí @container, container-type a container-name vytvářet komponenty, které se přizpůsobí velikosti svého rodiče místo viewportu.
16
minut
CSS Anchor Positioning – posicování elementů relativně k jiným
Jak pomocí anchor-name, position-anchor a funkce anchor() posicovat elementy relativně k jiným bez JavaScriptu.
6
minut
Centrování na webových stránkách
Moderní způsoby vertikálního i horizontálního centrování v CSS. Flexbox, Grid, margin auto a další techniky.
8
minut