Navigation

Scrollspy

Automatically adjust navigation or list group components based on scroll position to highlight the link that is currently active in the viewport.

Basic example

Default

Set the values for the attributes `data-scrollspy` and `data-scrollspy-scrollable-parent` to designate the scrollspy component and its corresponding parent container, targeting their respective Id's.

Index
Chapter 1
- Chapter 1-1
- Chapter 1-2
Chapter 2
Chapter 3
- Chapter 3-1
- Chapter 3-2

Chapter 1

This placeholder content serves to demonstrate the functionality of the scrollspy page. As you scroll down, the corresponding navigation link is highlighted to indicate the active section. This example copy is continuously added to underscore the scrolling and highlighting feature.

Chapter 1-1

This placeholder content serves to demonstrate the functionality of the scrollspy page. As you scroll down, the corresponding navigation link is highlighted to indicate the active section. This example copy is continuously added to underscore the scrolling and highlighting feature.

Chapter 1-2

This placeholder content serves to demonstrate the functionality of the scrollspy page. As you scroll down, the corresponding navigation link is highlighted to indicate the active section. This example copy is continuously added to underscore the scrolling and highlighting feature.

Chapter 2

This placeholder content serves to demonstrate the functionality of the scrollspy page. As you scroll down, the corresponding navigation link is highlighted to indicate the active section. This example copy is continuously added to underscore the scrolling and highlighting feature.

Chapter 3

This placeholder content serves to demonstrate the functionality of the scrollspy page. As you scroll down, the corresponding navigation link is highlighted to indicate the active section. This example copy is continuously added to underscore the scrolling and highlighting feature.

Chapter 3-1

This placeholder content serves to demonstrate the functionality of the scrollspy page. As you scroll down, the corresponding navigation link is highlighted to indicate the active section. This example copy is continuously added to underscore the scrolling and highlighting feature.

Chapter 3-2

This placeholder content serves to demonstrate the functionality of the scrollspy page. As you scroll down, the corresponding navigation link is highlighted to indicate the active section. This example copy is continuously added to underscore the scrolling and highlighting feature.

Illustrations

With navbar

Below given example demonstrates scrollspy component with navbar.

First

This placeholder content serves to demonstrate the functionality of the scrollspy page. As you scroll down, the corresponding navigation link is highlighted to indicate the active section. This example copy is continuously added to underscore the scrolling and highlighting feature.

Second

This placeholder content serves to demonstrate the functionality of the scrollspy page. As you scroll down, the corresponding navigation link is highlighted to indicate the active section. This example copy is continuously added to underscore the scrolling and highlighting feature.

Third

This placeholder content serves to demonstrate the functionality of the scrollspy page. As you scroll down, the corresponding navigation link is highlighted to indicate the active section. This example copy is continuously added to underscore the scrolling and highlighting feature.

Fourth

This placeholder content serves to demonstrate the functionality of the scrollspy page. As you scroll down, the corresponding navigation link is highlighted to indicate the active section. This example copy is continuously added to underscore the scrolling and highlighting feature.

Fifth

This placeholder content serves to demonstrate the functionality of the scrollspy page. As you scroll down, the corresponding navigation link is highlighted to indicate the active section. This example copy is continuously added to underscore the scrolling and highlighting feature.

With list group

Below given example demonstrates scrollspy component with list group.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

Item 1

This placeholder content serves to demonstrate the functionality of the scrollspy page. As you scroll down, the corresponding navigation link is highlighted to indicate the active section. This example copy is continuously added to underscore the scrolling and highlighting feature.

Item 2

This placeholder content serves to demonstrate the functionality of the scrollspy page. As you scroll down, the corresponding navigation link is highlighted to indicate the active section. This example copy is continuously added to underscore the scrolling and highlighting feature.

Item 3

This placeholder content serves to demonstrate the functionality of the scrollspy page. As you scroll down, the corresponding navigation link is highlighted to indicate the active section. This example copy is continuously added to underscore the scrolling and highlighting feature.

Item 4

This placeholder content serves to demonstrate the functionality of the scrollspy page. As you scroll down, the corresponding navigation link is highlighted to indicate the active section. This example copy is continuously added to underscore the scrolling and highlighting feature.

Item 5

This placeholder content serves to demonstrate the functionality of the scrollspy page. As you scroll down, the corresponding navigation link is highlighted to indicate the active section. This example copy is continuously added to underscore the scrolling and highlighting feature.

Item 6

This placeholder content serves to demonstrate the functionality of the scrollspy page. As you scroll down, the corresponding navigation link is highlighted to indicate the active section. This example copy is continuously added to underscore the scrolling and highlighting feature.

Destroy/Reinitialize

The `destroy` <a href="#destroy-method" class="link link-primary">method</a> is provided to facilitate the destruction of a scrollspy element.

First

This placeholder content serves to demonstrate the functionality of the scrollspy page. As you scroll down, the corresponding navigation link is highlighted to indicate the active section. This example copy is continuously added to underscore the scrolling and highlighting feature.

Second

This placeholder content serves to demonstrate the functionality of the scrollspy page. As you scroll down, the corresponding navigation link is highlighted to indicate the active section. This example copy is continuously added to underscore the scrolling and highlighting feature.

Third

This placeholder content serves to demonstrate the functionality of the scrollspy page. As you scroll down, the corresponding navigation link is highlighted to indicate the active section. This example copy is continuously added to underscore the scrolling and highlighting feature.

Fourth

This placeholder content serves to demonstrate the functionality of the scrollspy page. As you scroll down, the corresponding navigation link is highlighted to indicate the active section. This example copy is continuously added to underscore the scrolling and highlighting feature.

Fifth

This placeholder content serves to demonstrate the functionality of the scrollspy page. As you scroll down, the corresponding navigation link is highlighted to indicate the active section. This example copy is continuously added to underscore the scrolling and highlighting feature.

Options usage

Scrollspy offset

Utilize the option `[--scrollspy-offset:number]` to adjust the scroll offset from the top for the scrollspy component. By default, its value is set to `0`.

First

This placeholder content serves to demonstrate the functionality of the scrollspy page. As you scroll down, the corresponding navigation link is highlighted to indicate the active section. This example copy is continuously added to underscore the scrolling and highlighting feature.

Second

This placeholder content serves to demonstrate the functionality of the scrollspy page. As you scroll down, the corresponding navigation link is highlighted to indicate the active section. This example copy is continuously added to underscore the scrolling and highlighting feature.

Third

This placeholder content serves to demonstrate the functionality of the scrollspy page. As you scroll down, the corresponding navigation link is highlighted to indicate the active section. This example copy is continuously added to underscore the scrolling and highlighting feature.

Fourth

This placeholder content serves to demonstrate the functionality of the scrollspy page. As you scroll down, the corresponding navigation link is highlighted to indicate the active section. This example copy is continuously added to underscore the scrolling and highlighting feature.

Fifth

This placeholder content serves to demonstrate the functionality of the scrollspy page. As you scroll down, the corresponding navigation link is highlighted to indicate the active section. This example copy is continuously added to underscore the scrolling and highlighting feature.

JavaScript behavior

Events — Event usage

METHOD| DESCRIPTION | RETURNING VALUE `on:beforeScroll`| Called before scrolling begins. Could be Promise. | Instance

First

This placeholder content serves to demonstrate the functionality of the scrollspy page. As you scroll down, the corresponding navigation link is highlighted to indicate the active section. This example copy is continuously added to underscore the scrolling and highlighting feature.

Second

This placeholder content serves to demonstrate the functionality of the scrollspy page. As you scroll down, the corresponding navigation link is highlighted to indicate the active section. This example copy is continuously added to underscore the scrolling and highlighting feature.

Third

This placeholder content serves to demonstrate the functionality of the scrollspy page. As you scroll down, the corresponding navigation link is highlighted to indicate the active section. This example copy is continuously added to underscore the scrolling and highlighting feature.

Fourth

This placeholder content serves to demonstrate the functionality of the scrollspy page. As you scroll down, the corresponding navigation link is highlighted to indicate the active section. This example copy is continuously added to underscore the scrolling and highlighting feature.

Fifth

This placeholder content serves to demonstrate the functionality of the scrollspy page. As you scroll down, the corresponding navigation link is highlighted to indicate the active section. This example copy is continuously added to underscore the scrolling and highlighting feature.

JavaScript

// This method/event is used in above example.
const el = HSScrollspy.getInstance('[data-scrollspy="#scrollspy"]', true);
const collapse = HSCollapse.getInstance('[data-collapse="#navbar-collapse-basic"]', true);

el.element.on('beforeScroll', (instance) => {
  return new Promise((res) => {
    if (collapse.element.el.classList.contains('open')) {
      collapse.element.hide();
      StaticMethods.afterTransition(collapse.element.content, () => res(true));
    } else {
      res(true);
    }
  });
});

Class referenceThe component, style, color, state, size and modifier classes available for this component.

Class	Type	Description
`scrollspy-active:{tw-utility-class}`	variant	Adds tailwindCSS classes when navigation link is active.