Zvýraznění aktivní sekce při rolování

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

• MDN: Intersection Observer
• Creating a scroll-spy with 2 lines of CSS (Una Kravets)
• CSS-only scrollspy with scroll-target-group and :target-current (Sara Soueidan)
• Zvýraznění podle rolování
• Zvýraznění aktivní kotvy