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: 'text-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. |
