ScrollSpy

The Scrollspy component allow you to know where you are on the page.
Just send it the HTML element which is tracked and the class which is added when an element is active.
You can see the example of what you can do on the right of the screen of any page of the docs.

Every selected element need to have an id to make the scrollspy link work.

Basic scrollspy

Using the basic version, you have to put the link yourself inside the scrollspy element.

Auto scrollspy option

The auto option automatically creates the links inside the scrollspy div.
The links will be generated with the elements selected with "selector".
This example is based on this documentation scrollspy.

Options

Property Default value Description
offset 200 Offset between the top of the page and the targeted zone.
linkSelector 'a' The element selector. You can pass specific classes to select specific elements.
classes 'active' The classes which will be added to the corresponding element when you have scrolled to the targeted zone.
auto {
 enabled: false,
 classes: '',
 selector: ''
}
Set the auto mode to automatically detect all the elements corresponding to the selectors, and add the base classes to the links.
<a> tags are automatically created.
Example : { enabled: true, classes: 'txt-grey mt-2 font-w500', selector: 'h2' }

Events

Event Description
ax.scrollspy.setup Event sent when the scrollspy has been setup.
ax.scrollspy.update Event sent when the scrollspy has been updated.