jQuery全屏跟随和可平滑跳转到相应文章段落的导航菜单

这是一款非常实用的jQuery全屏跟随和可平滑跳转到相应文章段落的导航菜单插件。该菜单插件会自动检测你的HTML结构，搜索内容的标题并生成对应的菜单。当用户滚动页面，菜单将处于固定位置，并高亮当前用户正在浏览的内容的对应的菜单项。

HTML结构

要使用这个平滑跳转菜单插件，首先要在页面中引入 jquery 和jquery.jumpto.js以及immersive-slider.css文件。

<div class="page_container">
  <div class="jumpto-block">
    <h2>Header 1</h2>
    <h3>SubHeader 1</h3>
    ....
    <h3>SubHeader 2</h3>
    ....
  </div>
  <div class="jumpto-block">  
    <h2>Header 2</h2>
    <h3>SubHeader 1</h3>
    ...
  </div>
</div>
                

html结构使用page_container作为wrapper。在它的内部，每一个文章段落都用一个div来包裹，在demo中是div jumpto-block，这是为了方便插件搜索每个段落的标题和子标题。<h2>标题用来做第一级标题，<h3>标题用来做第二级子标题。

JAVASCRIPT

使用下面的JS代码来调用该平滑跳转菜单插件。

$(".page_container").jumpto({
  firstLevel: "> h2",
  secondLevel: false,
  innerWrapper: ".jumpto-block",
  offset: 400,
  animate: 1000,
  navContainer: false,
  anchorTopPadding: 20,
  showTitle: "Jump To",
  closeButton: true
});
                

在上面的调用设置中，二级子菜单将在一级菜单内部动态生成。菜单在用户滚动页面400px后会固定在页面上，并且当用户点击菜单项时，将在1000毫秒黑平滑的滚动到对应的段落处。

下面是一些可用的参数：

• firstLevel：该参数用于设置一级菜单的选择器。默认值是> h2 。
• secondLevel：该参数用于设置二级子菜单的选择器。如果你设置它为> h3 ，那么所有一级菜单中的h3标签都被设置为二级子标题。默认值为"false"。
• innerWrapper：该参数用于自定义文章内容段落的选择器。默认值为.jumpto-block。
• offset：该参数用于定义页面向下滚动多少像素后菜单开始固定。默认值为400像素。
• animate：该参数用于定义在点的菜单项时页面的滚动速度。设置为"false"关闭该参数。
• navContainer：该参数用于设置菜单项出现的位置，可以通过该参数设置菜单的选择器（如demo3）。默认值为false。
• anchorTopPadding：该参数用于设置标题和页面顶部的padding值。默认值为20px。
• showTitle：你可以通过该参数为导航菜单设置一个标题。默认值为"Jump To"。设置为"false"可以隐藏它。
• closeButton：该参数用于在菜单底部设置一个关闭按钮。默认值为"true"。设置为"false"可以隐藏关闭按钮。
• closeButton：该参数用于在菜单底部设置一个关闭按钮。默认值为"true"。设置为"false"可以隐藏关闭按钮。