这是一款非常实用的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"可以隐藏关闭按钮。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!