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 }
- 评论