在页面底部引入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">
    <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>


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
下载 在线预览 积分 (-2) 吐槽 (8)

- 评论

  • 加载中,请稍候…