Highlight Scroll (Alpine.js Plugin)

Alpine.js plugin for scroll-based navigation. Highlights items as their section appears in view and scrolls smoothly on click.

Installation

CDN

<script defer src="https://unpkg.com/highlight-scroll@latest/dist/highlight-scroll.min.js"></script>
<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>

NPM/Yarn

npm install -D highlight-scroll
# or
yarn add -D highlight-scroll

import Alpine from 'alpinejs'
import HighlightScroll from 'highlight-scroll'

Alpine.plugin(HighlightScroll({
  offset: 100,
  highlightClasses: 'text-blue-500 font-bold transition-all'
}))

Alpine.start()

Basic Usage

<main x-scroll-group>
  <div x-scroll-container>
    <section x-scroll-section="'section-1'">Section 1</section>
    <section x-scroll-section="{ id: 'section-2', group: 'default' }">Section 2</section>
  </div>

  <nav>
    <ul>
      <li><a x-scroll-item="'section-1'" href="#section-1">Section 1</a></li>
      <li><a x-scroll-item="{ target: 'section-2', group: 'default' }" href="#section-2">Section 2</a></li>
    </ul>
  </nav>
</main>

Directives Overview

| Directive | Purpose | Example | |----------------------|--------------------------------------|---------------------------------------------------------| | x-scroll-group | Group for scroll behavior | x-scroll-group="{ group: 'nav', offset: 50 }" | | x-scroll-container | Scrollable area | x-scroll-container="{ group: 'default' }" | | x-scroll-section | Marks section (needs id) | x-scroll-section="{ id: 'about', group: 'default' }" | | x-scroll-item | Nav link to section | x-scroll-item="{ target: 'about', group: 'default' }" |

You can also pass simple strings:
x-scroll-section="'about'" or x-scroll-item="'about'" (defaults to group "default").

Notes

• If x-scroll-container is not set, scrolls on window.
• Group is optional; defaults to "default".
• Section id must match the item’s target.

Author

• 🔗 pinkary.com/@namu
• 💼 LinkedIn - Namu Makwembo
• 📹 Youtube - Namu Makwembo