Data attributes
Please pay attention to the following attributes before going further into implementing the JavaScript behaviors of the component:
data-ecl-inpage-navigation-container
: on the content container, such as the row that contains both the inpage navigation and the contentdata-ecl-inpage-navigation
: on the<nav>
itselfdata-ecl-inpage-navigation-trigger
: on the dropdown button that appears on mobiledata-ecl-inpage-navigation-trigger-current
: on the<span>
within the button ; we use it to inject the title of the currently active sectiondata-ecl-inpage-navigation-list
: to be applied on the list of linksdata-ecl-inpage-navigation-link
: to be applied on each link in the inpage navigation
API
InpageNavigation
Parameters
element
HTMLElement DOM element for component instantiation and scopeoptions
Object (optional, default{}
)options.stickySelector
String Selector for sticky inpage navigation element (optional, default'[data-ecl-inpage-navigation]'
)options.containerSelector
String Selector for inpage navigation container element (optional, default'[data-ecl-inpage-navigation-container]'
)options.inPageList
String Selector for inpage navigation list element (optional, default'[data-ecl-inpage-navigation-list]'
)options.spySelector
String Selector for inpage navigation spied element (optional, default'[data-ecl-inpage-navigation-link]'
)options.toggleSelector
String Selector for inpage navigation trigger element (optional, default'[data-ecl-inpage-navigation-trigger]'
)options.linksSelector
String Selector for inpage navigation link element (optional, default'[data-ecl-inpage-navigation-link]'
)options.spyActiveContainer
String Selector for inpage navigation container to spy on element (optional, default'ecl-inpage-navigation--visible'
)options.spyOffset
Number (optional, default20
)options.spyClass
String Selector to spy on (optional, default'ecl-inpage-navigation__item--active'
)options.spyTrigger
String (optional, default'[data-ecl-inpage-navigation-trigger-current]'
)options.attachClickListener
Boolean Whether or not to bind click events (optional, defaulttrue
)options.contentClass
(optional, default'ecl-inpage-navigation__heading--active'
)
initSticky
Initiate sticky behaviors.
destroySticky
Destroy sticky behaviors.
initScrollSpy
Initiate scroll spy behaviors.
activateScrollSpy
Activate scroll spy behaviors.
Parameters
event
Event
deactivateScrollSpy
Deactivate scroll spy behaviors.
destroyScrollSpy
Destroy scroll spy behaviors.
initObserver
Initiate observer.
destroyObserver
Destroy observer.
init
Initialise component.
update
Update scroll spy instance.
handleClickOnToggler
Invoke event listeners on toggle click.
Parameters
e
Event
handleClickOnLink
Sets the necessary attributes to collapse inpage navigation list.
destroy
Destroy component instance.
autoInit
Parameters
root
HTMLElement DOM element for component instantiation and scope$1
Object (optional, default{}
)$1.INPAGE_NAVIGATION
(optional, default{}
)
Returns InpageNavigation An instance of InpageNavigation.
Setup
There are 2 ways to initialise the component.
Automatic
Add data-ecl-auto-init
attribute to component's markup
<nav
class="ecl-inpage-navigation"
data-ecl-inpage-navigation
data-ecl-auto-init="InpageNavigation"
>
...
</nav>
Use the ECL
library's autoInit()
(ECL.autoInit()
) when your page is ready or other custom event you want to hook onto.
Manual
Get target element, create an instance and invoke init()
.
Given you have 1 element with an attribute data-ecl-inpage-navigation
on the page:
var elt = document.querySelector('[data-ecl-inpage-navigation]');
var inpageNavigation = new ECL.InpageNavigation(elt);
inpageNavigation.init();