scrollTrack：jQuery实现页面滚动时菜单悬浮跟踪功能
这个插件主要实现的功能有：
- 根据页面内容方框生成目录（一般是类似h1、h2这样的标题）
- 生成的目录在滚动时悬浮在浏览器中间
- 滚动过程中，实时跟踪页面内容，并在目录中高效标题
- 解决悬浮水平滑动导致的内容遮盖
插件未压缩前2.5K，属于相当轻量级了，有5个选项，配置相当简单。
演示和下载
话不多说，先看演示
点击这里下载
用法
在页面<head>标签内加入scrolltrack.css、JQuery和scrolltrack.js文件：
<linkrel="stylesheet"type="text/css"href="css/scrolltrack.css"> <scripttype="text/javascript"src="js/jquery-1.12.0.min.js"></script> <scripttype="text/javascript"src="js/scrolltrack.js"></script>
之后在HTML中配置两个容器：
<div> <div></div> </div> <div> <div> <h2>1F</h2> </div> <div> <h2>2F</h2> </div> <div> <h2>3F</h2> </div> </div> <div></div>
如上，subnav是目录，content是要跟踪的内容框，每一条内容为item，subnav的内容取自h2标签中的内容，当subnav滑动到bottom的时候会停止。
在页面中引用scrollTrack就可以了：
<scripttype="text/javascript">
$(".subnav").scrollTrack();
</script>
如果要带选项，配置如下：
$(".subnav").scrollTrack({end:".bottom",zIndex:1000});
选项
scrollTrack有如下一些选项，
| 参数名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| contentClass | 字符串 | .content | 内容的class。也就是要跟踪、要采样的区域。 |
| title | 字符串 | h2,h3 | 标题的class。 |
| zIndex | 数字 | 0 | CSS的z-index值。 |
| end | 字符串 | null | 滑动到这个元素是停止。 |
| extraClass | 字符串 | scrolltrack | 悬浮添加的额外的class。 |