scrollTrack：jQuery实现页面滚动时菜单悬浮跟踪功能

Gary

9 年前

这个插件主要实现的功能有：

根据页面内容方框生成目录（一般是类似h1、h2这样的标题）
生成的目录在滚动时悬浮在浏览器中间
滚动过程中，实时跟踪页面内容，并在目录中高效标题
解决悬浮水平滑动导致的内容遮盖

插件未压缩前2.5K，属于相当轻量级了，有5个选项，配置相当简单。

演示和下载

话不多说，先看演示

点击这里下载

用法

在页面<head>标签内加入scrolltrack.css、JQuery和scrolltrack.js文件：

<link rel="stylesheet" type="text/css" href="css/scrolltrack.css">

<script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="js/scrolltrack.js"></script>

之后在HTML中配置两个容器：

<div class="submenu">
    <div class="subnav"></div>
</div>
<div class="content">
    <div class="item">
        <h2>1F</h2>
    </div>
    <div class="item">
        <h2>2F</h2>
    </div>
    <div class="item">
        <h2>3F</h2>
    </div>
</div>
<div class="bottom"></div>

如上，subnav是目录，content是要跟踪的内容框，每一条内容为item，subnav的内容取自h2标签中的内容，当subnav滑动到bottom的时候会停止。

在页面中引用scrollTrack就可以了：

<script type="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。