Home Documentation
Getting started General
Components
Forms
Utilities
Sass Plugins
Check changelog.
1.0.0-beta.2

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.

JavaScript initialization

Once HTML was setup, you can activate the scrollspy with this simple code.
Just pass the id of your scrollspy that you want to activate.

To know all the ways to initialize a JS component, please read the JS Init page.

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 corresponding selectors, and add the classes to the corresponding link.
<a> tags are automatically created.
Example : { enabled: true, classes: 'active txt-blue', 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.