JavaScript文档导航插件-navigator.js

navigator.js是用来创建一个粘性文档导航的插件，滚动内容时，会凸显当前内容所对应的菜单项。

使用方法

在页面底部引入Navigator.bundle.js JavaScript库文件

<script src="Navigator.bundle.js"></script>

假设您的页面含有以下代码

<h2 id="introduction" class="page-link">Introduction</h2>
...
<h2 id="Installation" class="page-link">Installation</h2>
...
<h2 id="example" class="page-link">Example</h2>
...

创建页面导航

<div class="links">
  <ul>
    <li class="list__item"><a class="stickyLink" href="#introduction">Introduction</a></li>
    <li class="list__item"><a class="stickyLink" href="#Installation">Installation</a></li>
    <li class="list__item"><a class="stickyLink" href="#example">Example</a></li>
  </ul>
</div>

初始化插件

var exampleNav = new Navigator({
    activeClass: 'active',
    activeElement: '.list__item',
    defaultIndex: 1,
    offset: 0,
    pageLinkSelector: '.page-link',
    throttle: 75,
    updateState: true,
    debug: true
});

默认配置项

// Class name applied to the current active element.
activeClass: 'active',

// Any valid HTML Selector, .foo, #bar, *[data-active]. 
// The active element by default will be anchor link with corrorsponding href attribute, if activeClass is set to false.
activeElement: false,

// The default active item, this is not zero indexed (defaultIndex: 1 = first item)
// If set to false, first active item will activate once scrolled into view.
defaultIndex: 1,

// Active item offset, this is the amount in pixels an item will activate before it reaches the top of the viewport. Margin & padding are currently included by default.
offset: 0,

// Page link selector, this accepts any valid HTML selector to identify which links should be considered part of the Navigator menu.
pageLinkSelector: '.page-link',

debounce: 100,

// Amount in milliseconds the window scroll event is throttled. 
// The default will update the Navigator's state every 75ms consecutive scroll events are fired. 
// Increasing this amount will improve performance but affect Navigator's accuracy responding to scroll events.
throttle: 75,
useHistory: true,
debug: false,

// Fired once the active item has changed, the active item HTMLElement is available as an argument.
callbacks: {
  onActiveItem: null
}

打赏