Inpage navigation

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 content
• data-ecl-inpage-navigation: on the <nav> itself
• data-ecl-inpage-navigation-trigger: on the dropdown button that appears on mobile
• data-ecl-inpage-navigation-trigger-current: on the <span> within the button ; we use it to inject the title of the currently active section
• data-ecl-inpage-navigation-list: to be applied on the list of links
• data-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 scope

• options 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, default 20)
  • 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, default true)
  • 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();