Scrollspy

Monitors scroll position within a container and highlights the corresponding navigation link.

Installation

dotnet add package Lumeo

One-time app setup (AddLumeo(), CSS & JS) is covered in the installation guide.

Usage

@using Lumeo

<Scrollspy />

When to Use

Documentation pages with a table of contents that highlights the current section
Long-form content with sidebar navigation for section tracking
Single-page applications where scroll position drives navigation state
Landing pages with smooth-scrolling section links

Vertical Scrollspy

Section 1

This is the content for Section 1. Scroll through the container to see the navigation links update automatically. Each section is tracked by the Scrollspy component, which detects which section is currently in view and highlights the corresponding link in the sidebar navigation.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section 2

This is the content for Section 2. Scroll through the container to see the navigation links update automatically. Each section is tracked by the Scrollspy component, which detects which section is currently in view and highlights the corresponding link in the sidebar navigation.

Section 3

This is the content for Section 3. Scroll through the container to see the navigation links update automatically. Each section is tracked by the Scrollspy component, which detects which section is currently in view and highlights the corresponding link in the sidebar navigation.

Section 4

This is the content for Section 4. Scroll through the container to see the navigation links update automatically. Each section is tracked by the Scrollspy component, which detects which section is currently in view and highlights the corresponding link in the sidebar navigation.

Section 5

This is the content for Section 5. Scroll through the container to see the navigation links update automatically. Each section is tracked by the Scrollspy component, which detects which section is currently in view and highlights the corresponding link in the sidebar navigation.

Section 6

This is the content for Section 6. Scroll through the container to see the navigation links update automatically. Each section is tracked by the Scrollspy component, which detects which section is currently in view and highlights the corresponding link in the sidebar navigation.

Horizontal Nav

Section 1

This is the content for Section 1. Click any navigation link above to smooth-scroll to that section, or scroll manually to see the active link update in real time.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Section 2

This is the content for Section 2. Click any navigation link above to smooth-scroll to that section, or scroll manually to see the active link update in real time.

Section 3

This is the content for Section 3. Click any navigation link above to smooth-scroll to that section, or scroll manually to see the active link update in real time.

Section 4

This is the content for Section 4. Click any navigation link above to smooth-scroll to that section, or scroll manually to see the active link update in real time.

Section 5

This is the content for Section 5. Click any navigation link above to smooth-scroll to that section, or scroll manually to see the active link update in real time.

Section 6

This is the content for Section 6. Click any navigation link above to smooth-scroll to that section, or scroll manually to see the active link update in real time.

With Offset & Instant Scroll