jQuery One Page Nav - jquery单页网站导航插件
  • 分享到微信朋友圈
    X
立即下载 查看演示

jQuery One Page Nav 是一款轻量级的 jQuery 插件，用于单页网站的导航。单击导航时可实现平滑滚动，并在您滚动浏览不同部分时自动选择正确的导航项。

使用方法

引入JQuery和jquery.nav库‌：

<script src="jquery.js"></script>
<script src="jquery.nav.js"></script>

HTML结构

<ul id="nav">
    <li class="current"><a href="#intro">Intro</a></li>
    <li><a href="#usage">Usage</a></li>
    <li><a href="#examples">Examples</a></li>
</ul>
<div class="wrap">
    <div id="intro">
    </div>
    <div id="usage">
    </div>
    <div id="examples">
    </div>
</div>

初始化与说明

<script type="text/javascript">
    $(document).ready(function () {
        $('#nav').onePageNav();
    });
</script>

更多参数

  • currentClass 字符串 ‘current’ 导航高亮的 class

  • changeHash 布尔值 false URL 显示命名锚记

  • scrollSpeed 整数 750 动画持续时间，以毫秒为单位

  • scrollThreshold 整数/浮点数 0.5 下一个处于浏览器可视区域多少比例时导航切换

  • filter 字符串 ” 过滤不要的项，如 filter: ‘:not(.external)’

  • easing 字符串 ‘swing’ 滚动动画方式

  • begin 函数 滚动前的回调函数

  • end 函数 滚动后的回调函数

  • scrollChange 函数 导航切换后的回调函数