Moderní tvorba webových aplikací
O webu

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í.

Sekce A

Sekce B

Sekce C

Ř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.

Úvod

Text.

Implementace

Text.

Doporučení

Text.

Je-li na stránce fixní hlavička, je dobré nastavit sekcím scroll-margin-top podle její výšky.

Odkazy

Související články

Jak udělat input s automatickou šířkou podle obsahu

Několik způsobů, jak dosáhnout toho, aby se textové pole rozšiřovalo a zužovalo podle délky zadaného textu.

9 minut

Šířka znaků ve fontech

Proč mají znaky různou šířku a jak to řešit v responsivním designu.

17 minut

CSS @starting-style

Jak animovat elementy při jejich prvním zobrazení pomocí at-pravidla @starting-style.

12 minut

CSS pseudo element ::marker

CSS pseudo element ::marker umožňuje stylovat odrážky seznamů

4 minuty

Novinky e-mailem

Když budu mít něco opravdu zajímavého, můžu vám to poslat e-mailem

Přidej se k 500+ čtenářům
Jen kvalitní obsah
Žádný spam

Web jecas.cz píše Bohumil Jahoda, kontakt
Seznam všech článků · Témata
2013–2026