jQuery单页导航插件One-Page-Nav
简介
电商网站的分类比较明确，比如1楼是手机通讯产品，2楼是家用电器，3楼是服装鞋包等等，旁边还会有一个固定的楼层导航，这个导航列出了所有的楼层，同时还会高亮你正在浏览的楼层，点击其他楼层按钮，又会滚动到其他楼层。这样的导航可以增加用户体验，让购物更加方便快捷。
如果你想在自己的页面上也实现这样的效果，那么可以试试 jQuery-One-Page-Nav 这款 jQuery插件，
电商网站的分类比较明确，比如1楼是手机通讯产品，2楼是家用电器，3楼是服装鞋包等等，旁边还会有一个固定的楼层导航，这个导航列出了所有的楼层，同时还会高亮你正在浏览的楼层，点击其他楼层按钮，又会滚动到其他楼层。这样的导航可以增加用户体验，让购物更加方便快捷。
如果你想在自己的页面上也实现这样的效果，那么可以试试 jQuery-One-Page-Nav 这款 jQuery插件。
HTML
<ul id="nav"> <li><a href="#intro">简介</a></li> <li><a href="#usage">使用</a></li> <li><a href="#options">选项</a></li> <li><a href="#examples">示例</a></li> <li><a href="#recommend">推荐</a></li> </ul> <div class="wrap"> <div id="intro"> </div> <div id="usage"> </div> <div id="options"> </div> <div id="examples"> </div> <div id="recommend"> </div> </div>
JavaScript
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript" src="http://www.jqcool.net/demo/201407/jquery-one-page-nav/jquery.nav.js"></script> $(function(){ $('#nav').onePageNav(); });
选项
| 属性/方法 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| currentClass | 字符串 | 'current' | 导航高亮的 class |
| changeHash | 布尔值 | false | URL 显示命名锚记（点击导航显示） |
| scrollSpeed | 整数 | 750 | 动画持续时间，以毫秒为单位 |
| scrollThreshold | 整数/浮点数 | 0.5 | 下一个处于浏览器可视区域多少比例时导航切换 |
| filter | 字符串 | '' | 过滤不要的项，如 filter: ':not(.external)' |
| easing | 字符串 | 'swing' | 滚动动画方式 |
| begin | 函数 | 滚动前的回调函数 | |
| end | 函数 | 滚动后的回调函数 | |
| scrollChange | 函数 | 导航切换后的回调函数 |
如果你想当用户点击时改菜单选项的hash（哈希值），那么请把changeHash设置为true。
实现过滤跳转
如果你想跳过某个菜单选项或是让这个菜单选项直接链接到其它地址，那么只需把这个菜单项的选择器传给写filter参数选项即可。
<ul id="nav">
<li class="current"><a href="#section-1">Section 1</a></li>
<li><a href="#section-2">Section 2</a></li>
<li><a href="#section-3">Section 3</a></li>
<li><a href="#section-4">Section 4</a></li>
<li><a href="#section-5">Section 5</a></li>
<li><a href="http://google.com" class="external">Some other link</a></li>
</ul>
$('#nav').onePageNav({
filter: ':not(.external)'
});
如果在IOS设备上有问题
如果你单击菜单选项上的链接而导致其它链接失效，直到滚动才恢复，那么你可以用以下这方式来解决。
$('#nav').onePageNav({
begin: function() {
//Hack so you can click other menu items after the initial click
$('body').append('<div id="device-dummy" style="height: 1px;"></div>');
},
end: function() {
$('#device-dummy').remove();
}
});