This plugin automatically generates directories to be inserted into the selected directory container based on the H1, H2, H3, H4, H5, h6 tags in the selected directory contents and provides a nice styling effect.

  • Listen for scrolling in the content area
  • Click the jump function

Compatibility: IE10+ (due to node.classlist)

Address stamp here github address, welcome star, issue, pr ~

If you are interested, you can join the wechat group at the end of the article and chat with us

1. Preview

Cool mode:

Common mode:

You can use the online DEMO to get a preview of the cool mode

2. Implementation idea

The scrolling listener uses getBoundingClientRect to get the size of the element and the position relative to the viewport to determine whether our listener h1~ H6 tags are in the viewport. If so, add linkActiveClass.

The traditional anchor location jump will conflict with the route of hash mode single-page application and navigate to the wrong route path. Here, the ID to be jumped is put into the dataset and retrieved during the jump and scrollIntoView is used to smoothly scroll to the target position.

The left sidebar is drawn using SVG’s path, with some adjustments based on the hierarchy, and CSS’s Transition.

3. Api

If you want to use the default styles, import them manually

import 'progress-catalog/src/progress-catalog.css'
Copy the code

Usage:

/ / introduction
import Catalog from 'ProgressCatalog'

/ / use
new Catalog({
	contentEl: 'loading-animation'.catalogEl: `catalog-content-wrapper`.selector: ['h2'.'h3']})Copy the code

The constructor takes the following arguments:

contentEl [String]

To retrieve the id selector for the content area of the generated directory, no # is required

catalogEl [String]

The id selector of the directory container to place the generated directory append without the # tag

ScrollWrapper [Optional, String]

The id selector for the content area container that listens for the Scroll event. # is not required; otherwise it defaults to the parent element of contentEl

LinkClass [Optional, String]

Class for all directory entries. Default: cl-link

Note that if this value is set, you need to override the default style

LinkActiveClass [Optional, String]

Active directory entry All classes, default: cl-link-active

Note that if this value is set, you need to override the default style

Selector [optional, Array]

Choose the title tag directory, default: [‘ h1, h2, h3, h4, h5, ‘h6]

If you only want to generate directories for the h2, H3 tags of the target content area, you can set selector: [‘h2’, ‘h3’]

ActiveHook [optional, Function]

Callback function when activating a new directory entry label

TopMargin [optional, Number]

How far the first directory label needs to be moved down before it is considered visible. Default: 0

BottomMargin [optional, Number]

Same as above, the distance moved down, default: 0

Cool [optional, Boolean]

Cool mode switch. Default value: true

Online posts are mostly different in depth, even some inconsistent, the following article is a summary of the learning process, if you find mistakes, welcome to comment out ~

Reference:

  1. Ruan Yifeng – SVG image tutorial
  2. Codepen – Progress Nav
  3. MDN – scrollIntoView
  4. MDN – HTMLElement.dataset

PS: Welcome to pay attention to my official account [front-end afternoon tea], come on together

In addition, you can join the “front-end afternoon tea Exchange Group” wechat group, long press to identify the following TWO-DIMENSIONAL code to add my friend, remarks add group, I pull you into the group ~