jQuery滚动高亮插件：scrollHighlight

插件描述

jQuery滚动高亮插件，也叫滚动监听，Bootstrap里面也有类似的插件scrollSpy，主要是监听某一部分导航随着网页的滚动随着高亮，即当某个标签滚动到窗口位置时，给它加一个样式，并添加高亮。该插件支持自适应。下面是本站的一篇文章：前端开发框架 侧栏的演示，你可以打开文章看看具体效果。

该插件已经上传到github，欢迎到github项目主页查看：scrollHighlight

插件演示

默认容器为window，并且是竖直滚动，距离节点距离为10px.

默认容器为window，内容为水平滚动，距离节点距离为0px.

容器为.main,竖直滚动，距离节点距离为10px.

容器为.main.水平滚动

使用方法

引入jquery地址并引入本插件地址，添加以下代码：

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/scrollHighlight.js"></script>
<script type="text/javascript">
$(function(){
$(".sidebar").scrollHighlight();
})
</script>

默认的侧栏高亮代码样式为

<div class="sidebar">
<ul>
<li><a href="#page1">这是节点1</a></li>
<li><a href="#page2">这是节点2</a></li>
<li><a href="#page3">这是节点3</a></li>
<li><a href="#page4">这是节点4</a></li>
<li><a href="#page5">这是节点5</a></li>
<li><a href="#page6">这是节点6</a></li>
<li><a href="#page7">这是节点7</a></li>
<li><a href="#page8">这是节点8</a></li>
<li><a href="#page9">这是节点9</a></li>
</ul>
</div>

当然插件提供了自定义方式，你可以不使用a链接，单纯使用li，同时该插件还考虑到了节点的内容有可能是隐藏或者并没有出现的情况。所以再也不必担心会用坏了，尽情的使用吧。

参数介绍

参数名字	默认值	参数作用
childItem	“a”	高亮的节点，你可以定义为你喜欢的Dom
attribute	“href”	高亮节点属性,可以定义为你喜欢的属性，如src,或者data-href等
highlight	‘highlight’	给高亮节点添加的类，你可以改为你喜欢的类，如’active’,’current’等
buffer	0	距离节点的距离,可以定义未到节点时高亮的值
cancelFlag	true	超过节点的外部高度时取消高亮，你可以不取消高亮
container	window	滚动的容器，你可以随意的定义一个滚动容器，如’#content’等
mode	‘vertical’	滚动的模式，默认为竖直方向，可以为其他如horizontal(水平方向)

如果你发现这个插件有bug的地方，欢迎你pull消息给我。如果你发现这个插件很好用，请把它分享给你的小伙伴吧。

插件下载

有gitub的童鞋墙裂欢迎你关注我的github，我会时常写一些有用的代码在上面的：我的github主页