先给大家展示下效果图，看看是不是亲想要实现的效果，如果还满意的话请查看本文详情，同时大家也可以下载源码哦。
效果图：
效果展示 源码下载
代码说明:
仿百度百科右侧导航代码jquery插件，这个仿百科右侧导航js代码，在很久以前就像搞个用了，因为这个导航特别适合长篇文档使用，花了半天时间写了这个仿百科导航插件，不过和百度百科比起来还是有点弱，没有实现右侧导航区域滚动的功能，如果您的文档不是超级变态长，应该够用。
如果你的导航超级长，可能要用到侧边导航页可以滚动，一般情况下还是用不到，等过些时候有好的实现思路再搞吧，暂时没想到实现右侧导航区域和左侧内容的滚动并且联动的好办法。
注意
【基于jQuery实现仿百度百科右侧导航】是一种在网页中创建类似百度百科的页面目录导航的方法。这个导航系统适用于长篇文章或文档，可以帮助用户快速跳转到不同章节。通过使用jQuery库，开发者可以轻松地实现这一功能，提高用户体验，尤其是在浏览包含多级标题的长篇内容时。
**代码详解**
1. **jQuery插件结构**
这段代码定义了一个名为`DirectoryNav`的jQuery插件，用于生成和管理导航目录。插件接受两个参数：一个是需要生成导航的HTML元素（如`h2`和`h3`），另一个是配置对象，用于定制插件的行为。
2. **初始化方法（init）**
插件的初始化方法中，首先调用了`make`函数来生成导航目录结构，然后是`setArr`来设置层级关系，最后绑定事件处理函数`bindEvent`，负责响应滚动和点击事件。
3. **生成导航结构（make）**
`make`函数动态创建了一个包含导航目录的`<div>`，并使用`$h`参数中的`h2`和`h3`元素生成了对应的`<li>`项。`<li>`分为两种类型：一级导航（`l1`）和二级导航（`l2`）。这样，即使HTML结构中所有标题在同一级别，也能通过逻辑层次呈现为两级导航。
4. **设置数组（setArr）**
`setArr`方法用于存储导航目录的层级关系，便于后续的滚动定位和当前选中标签的管理。
5. **事件绑定（bindEvent）**
通过`bindEvent`，插件监听窗口滚动事件，并依据滚动位置更新导航中的当前选中标签。同时，当用户点击导航项时，会平滑滚动到对应的内容区域。
6. **滚动处理**
插件内部的滚动检测机制使用了`scrollThreshold`（滚动检测阀值）、`scrollSpeed`（滚动动画速度）和`scrollTopBorder`（显示导航的滚动阈值）等配置项，以实现平滑滚动效果。`scrollChange`是自定义的回调函数，可以在滚动时触发。
7. **CSS3过渡动画**
导航的滑动效果利用了CSS3的过渡动画，对于不支持CSS3的浏览器，导航的滑动效果将不明显。
**使用与扩展**
要使用此插件，首先需要引入jQuery库，然后在合适的时机调用`DirectoryNav`构造函数，并传入相应的HTML元素和配置对象。例如：
```javascript
$(document).ready(function() {
var directoryNav = new DirectoryNav($('h2,h3'), {});
});
```
这个插件目前仅实现了两层导航，但理论上可以扩展到无限级别的导航。然而，它没有实现右侧导航区域的滚动功能，这可能在长导航列表中是个限制。要添加这个功能，可能需要更复杂的布局和额外的滚动监听逻辑。
**注意事项**
- 使用时需确保浏览器支持jQuery和CSS3过渡动画。
- 根据实际项目需求调整插件配置项，如滚动阈值、速度等。
- 考虑到性能，插件采用滚动延时检测，避免在快速滚动时过于频繁地触发事件。
基于jQuery实现的仿百度百科右侧导航代码提供了一种简便的方式来组织和导航长篇文章，虽然没有完全复制百度百科的所有特性，但对于大多数情况已经足够使用。开发者可以根据需要进行定制和扩展，以适应更复杂的需求。
