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

Zobrazení dlouhé URL

Jak zobrazit dlouhé URL v aplikaci, aby nerozbila layout.

6 minut

Převod písmen na VELKÁ a malá

Převedení textu na velká nebo malá písmena.

12 minut

Možnosti stylování <iframe>

Co lze a nelze u <iframe> ovlivnit pomocí CSS a jak na změnu textu nebo barev.

10 minut

CSS funkce random()

Jak v CSS generovat náhodné hodnoty pomocí random() a kdy ji použít.

6 minut

Web jecas.cz píše Bohumil Jahoda, kontakt
Seznam všech článků
2013–2025