hallowebsite Scrollspy Menu Highlighter

DE | EN

Hebt auf Onepagern und langen Landingpages den Menüpunkt des gerade sichtbaren Bereichs hervor. Funktioniert mit Kadence-Menüs, Navigations-Blöcken und eigenen Anker-Menüs und berücksichtigt Sticky Header sowie doppelte Mobil-Menüs.

Download v1.2.2
Version
1.2.2
Aktualisiert
14. November 2026
Dateigröße
4,6 KB
Autor
hallowebsite

Überblick

hallowebsite Scrollspy Menu Highlighter hebt den Menüpunkt des Bereichs hervor, der gerade sichtbar ist, während Besucher durch einen Onepager oder eine lange Landingpage scrollen. Es funktioniert mit dem Kadence-Header-Menü, dem Navigations-Block, dem Classic-Menu-Block und selbst geschriebenen Anker-Menüs. Sticky Header und doppelte Menüs (Desktop und Mobil) werden ebenfalls berücksichtigt.

Funktionen

  • Erkennt Bereiche automatisch anhand der Anker-Links auf der aktuellen Seite.
  • Funktioniert mit Kadence-Menüs, Navigations- und Classic-Menu-Blöcken, eigenen HTML-Menüs und den meisten Drittanbieter-Menüs.
  • Berechnet den Versatz von Sticky Headern.
  • Hält doppelte Menüs auf derselben Seite synchron.
  • Keine Data-Attribute nötig – optionale Hilfsklassen für Sonderfälle.
  • Rührt die WordPress-Klasse current-menu-item nie an.

Grundlegende Verwendung

  1. Deinen Bereichen eine ID bzw. einen HTML-Anker geben, z. B. leistungen.
  2. Menüpunkte auf #leistungen (oder /seite/#leistungen) verlinken.
  3. Plugin aktivieren – fertig. Aktive Links erhalten die Klassen active und hw-scrollspy-active.

Optionale Hilfsklassen

KlasseZweck
hw-scrollspy-scopeBegrenzt die Erkennung auf einen Wrapper (z. B. ein einzelnes Menü im Inhalt und seine Bereiche).
hw-scrollspy-sourceMarkiert ein Menü ausdrücklich als Scrollspy-Menü.
hw-scrollspy-targetMarkiert ein Element ausdrücklich als Bereich.
 
<div class="hw-scrollspy-scope">
  <a href="#mein-bereich">Mein Bereich</a>
  <section id="mein-bereich">…</section>
</div>

Empfohlenes CSS

.hw-scrollspy-active > a,
a.hw-scrollspy-active {
  font-weight: 700;
  color: var(--global-palette1);
}

Hinweise

  • Es werden nur Links verfolgt, die auf IDs der aktuellen Seite zeigen.
  • Die Info-Seite findest du im Admin-Menü unter Scrollspy.

Changelog

Changed:
- Rebranding: neuer Name „hallowebsite Scrollspy Menu Highlighter“, Autor hallowebsite, Plugin-URI https://hallowebsite.de/plugins/scrollspy-menu-highlighter/
- Keine funktionalen Änderungen.