by zhangxinxu from http://www.zhangxinxu.com/wordpress/?p=7498
本文可全文转载，但需要保留原作者和出处。

技术文档，或者一些官网首页，重展示，基本上都是一个<section>一个<section>的段落组成，每个段落会有一个标题，此时页面往往会很长很长，如果用户阅读时候关心的只是中间某个段落，则交互体验并不友好，此时，就需要有一个页面内的标题导航，用户直接点击导航菜单，就能定位到对应的标题，此时阅读起来就省心多了。

由于这种交互实现并不难，因此，以前我都是直接现写一段JS脚本满足功能。近期，我又遇到需要这样处理的交互场景，琢磨了下，从业这么久，这种交互现写的场景估计一个巴掌都数不过来了吧，以后估计还会遇到这样的交互场景，一不做二不休，有必要写个即插即用的方法。

我就陪小朋友玩耍完毕后花了几个小时迅速弄了下，写了个名为jquery.titleNav.js的jQuery小插件。

一、jQuery小插件titleNav.js效果演示与下载

您可以狠狠地点击这里：自动生成标题导航jQuery小插件demo

demo页面是copy的一段LuLu UI（http://l-ui.com）的“关于”文档，滚动页面，可以看到右上方的导航会自动从跟随滚动变成fixed固定定位，同时高亮（这里是加粗）对应的菜单选项。

下载（右键->另存为）：jquery.titleNav.js

二、jQuery小插件titleNav.js使用

上面提供的demo页面的JS使用如下：

<script>
$('h3').titleNav();
</script>

就一行代码。

然后，需要下面的CSS配合：

.title-nav-ul {
    width: 200px;
    border: 1px solid #ccc;
    background-color: #fff;
    box-shadow: 1px 1px 3px rgba(0,0,0,.25);
    position: absolute;
    top: 200px; right: 10px;
}
.title-nav-li {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: inherit;
}
.title-nav-li.active {
    font-weight: bold;
}
.title-nav-li:hover {
    background-color: #f0f0f0;
}

实现的是右上方定位的垂直导航效果。

如果我们希望实现的是顶部定位的水平导航效果，则修改.title-nav-ul和.title-nav-li这两个类名的样式即可，分别表示导航容器和导航列表。

API使用与说明

API如下：

$().titleNav(options);

其中，$()知道jQuery包装器对象，在这里特指标题元素。options为可选参数，具体见下表：

关于自动生成的导航元素的DOM结构说明

自动生成的导航元素的DOM结构如下：

<div class="title-nav-ul">
  <a href="javascript:" class="title-nav-li active">一、为何叫LuLu？</a>
  <a href="javascript:" class="title-nav-li">二、为什么使用LuLu？</a>
  <a href="javascript:" class="title-nav-li">三、设计理念</a>
  <a href="javascript:" class="title-nav-li">四、滚动到底部我高亮</a>
</div>

高亮效果如下图：

可以看到有个类名active，这个就是用来标记当前哪个列表处于选中态的，用来控制导航的选中高亮效果，在本demo中就是单纯文字加粗。

其他说明

• 导航中列表点击后的定位效果不需要额外写，插件已经帮忙完成了，且定位带动画哦~
• 另外，如果滚动到底部，同时有多个标题，插件会自动定位到最后一个导航，做了相关的细节优化
• 兼容IE8+以及其他现代浏览器，以及移动端（不保证所有设备都OK）。

三、结束语

插件写得匆忙，尚未细致测试，若使用过程中遇到问题，欢迎反馈，定当及时更新。

最后分享一首歌，田馥甄北京草莓音乐节献唱《南山南》——

你在南方的艳阳里，大雪纷飞
我在北方的寒夜里，四季如春
如果天黑之前来得及，我要忘了你的眼睛
穷极一生，做不完一场梦

祝五一快乐！

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：http://www.zhangxinxu.com/wordpress/?p=7498

（本篇完）