PureJS_OnePageNav

The PureJS_OnePageNav library is designed to dynamically manage states of navigation links based on scroll offset. It comes with several options that allow customize page navigation working as intended.

Main functionalities:

• dynamically update nav links accordingly to reached section
• update hash accordingly to nav link or section
• choosing which link should be default active if none section reached
• exactly matching sections and no section zones with exact match option
• allows to set classes on links parents like [li, nav], not only anchor tags
• enforcing script loading only if suits defined URL paths
• defining distance from top, at which section should be changed
• visualization line for easier understanding
• changing options after script initialization

Getting Started

Installation

1npm install @zibuthe7j11/aperiam-et-quisquam

Useful links

Check out the demo

Find more in Github wiki

Including into project and default values:

1import OnePageNav from '@zibuthe7j11/aperiam-et-quisquam';
2
3// Default constructor options
4let options = {
5    defaultLinkActive: true,
6    updateATagClass: true,
7    changeOffset: 50,
8    parentsObtainingActiveClass: [],
9    setClassesOnSections: false,
10    exactMatch: false,
11    navLinkActiveClass: 'active',
12    sectionActiveClass: 'active',
13    defaultActiveElement: undefined,
14    updateHash: false,
15    saveHashBetweenSections: true,
16    onInit: [],
17    onChange: [],
18    debugLine: false,
19};
20
21let onePageNav = new OnePageNav('nav a', options);
22
23//or
24
25new OnePageNav.default(); // for alone imported umd file

License

The credit comments in the JavaScript files should be kept intact

(The MIT License)

Copyright (c) 2023 Mateusz Żołdak