This vanilla JS plug-in shows a navigation element that also acts as a progression bar as you scroll through the page. The UI consists of two main items: The navigation, which contains marker links to different parts of the page, and the progression bar, which grows as you scroll through the page. This UI plugin can be helpful for lengthy pages that contain many sections of content, such as those found in documentation websites.
The nav element has two flavors of styling: attached to the top of the page, or fixed to the right of the windows, although applying proper styling techniques can override these settings to come up with more innovative ways of presentation.
The navigation and progress elements will automatically build itself out. Meaning the user just needs to define the "sections" via the unique class selector, and the JS will detect these objects, calculate measurements, build DOM elements and construct the UI on it's own.
And of course, the user can style the look and placement of the bar as needed. These can be a helpful tool for documentation websites, or any pages containing many chapters/sections.
$ git clone https://github.com/edwardm/ECORE-JS-Page-Down-Progress.git
$ npm install
- TO-DO: Bug when window resizes, one of the anchors loses offset positioning
- TO-DO: Styling support for the navigation progress bar in horizontal format
- TO-DO: Better styling support for the navigation progress bar for mobile devices
- TO-DO: Better tooltip support for the navigation links, may incorporate Boostrap tooltip with Popper JS for viewport edge detection and placement
The code is available under the MIT License.