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.

<div class="scrollspy" id="scrollspy-example">
  <a href="#something">something</a>
  <a href="#something-else">something else</a>
</div>
// NOTE: this is NOT to be used if data-ax="scrollspy" is set in your HTML
let scrollSpy = new Axentix.ScrollSpy('#scrollspy-example');

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. 

<div class="scrollspy" id="scrollspy-auto"></div>
// NOTE: this is NOT to be used if data-ax="scrollspy" is set in your HTML
// This example is based on this documentation scrollspy.
let scrollSpy = new Axentix.ScrollSpy('#scrollspy-auto', {
  auto: {
    enabled: true,
    classes: 'txt-grey mt-2 font-w500 pl-2 bd-l-solid bd-l-3',
    selector: 'h1,h2'
  }
});

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#

// Listen to all scrollspy instances
document.addEventListener('ax.scrollspy.setup', function() {
  // setup event !
});

// Listen to only one scrollspy instance
let scrollspyQuery = document.querySelector('#example-scrollspy');
scrollspyQuery.addEventListener('ax.scrollspy.open', function() {
  // setup event only on #example-scrollspy
});
Event Description
ax.scrollspy.setup Event sent when the scrollspy has been setup.
ax.scrollspy.update Event sent when the scrollspy has been updated.