hallowebsite Scrollspy Menu Highlighter

Overview

hallowebsite Scrollspy Menu Highlighter highlights the menu item of the section that is currently in view while visitors scroll through a one-pager or a long landing page. It works with the Kadence header menu, the Navigation block, the Classic Menu block and hand-coded anchor menus. It also handles sticky headers and duplicated menus (desktop and mobile).

Features

• Detects sections automatically from the anchor links on the current page.
• Works with Kadence menus, Navigation and Classic Menu blocks, custom HTML menus and most third-party menus.
• Calculates the offset of sticky headers.
• Keeps duplicated menus on the same page in sync.
• No data attributes needed. Optional helper classes are available for special cases.
• Never touches the WordPress current-menu-item class.

Basic usage

1. Give your sections an ID or HTML anchor, e.g. leistungen.
2. Link menu items to #leistungen (or /page/#leistungen).
3. Activate the plugin. That's it: active links get the classes active and hw-scrollspy-active.

Optional helper classes

Class	Purpose
hw-scrollspy-scope	Limits detection to a wrapper (e.g. a single in-content menu and its sections).
hw-scrollspy-source	Marks a menu explicitly as a scrollspy menu.
hw-scrollspy-target	Marks an element explicitly as a section.

<div class="hw-scrollspy-scope">
  <a href="#my-section">My section</a>
  <section id="my-section">…</section>
</div>

Recommended CSS

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

Notes

• Only links pointing to IDs on the current page are tracked.
• The info page is in the admin menu under Scrollspy.

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