鼠标滚动导航变色

    <script>
        $(function(){
            var $wrap = $('.api-wrap'),
                $nav = $('.api-nav'),
                e;

            var $h = $wrap.find('h3[data-id]');
            var $a = $nav.find('a');

            $nav.on('click', 'a', function(){
                var index = $(this).index();
                var left = $($h[index]).offset().left;
                var top = $($h[index]).offset().top;
                scroll(left, top);
            });

            $(window).scroll(function(){
                e = $(window).scrollTop();

                for (var i = 0; i < $h.length; i++) {
                    if(e > ($($h[i]).offset().top - 100)) {
                        $a.removeClass('current');
                        $($a[i]).addClass('current');
                    }
                }
            });

        });
    </script>

<div class="api-wrap">
        <h1></h1>
        <p class="api-author"></p>
        <h3 data-id="file">目录/文件说明：</h3>
        <div class="api-con">
            <pre>
                webroot：
                    <em><strong>css：</strong></em>
                        <em>├─ <strong class="fwn">api.less</strong><b>文档说明css</b></em>
                        <em>├─ <strong class="fwn">css.less</strong><b>示例css</b></em>

                        <em>├─ <strong class="fwn">config.less</strong><b>less变量/函数</b></em>
                        <em>├─ <strong class="fwn">common.less</strong><b>公共css</b></em>
                        <em>├─ <strong class="fwn">index.less</strong><b>首页css/活动</b></em>
                        <em>├─ <strong class="fwn">course.less </strong><b>我的课程/精品课程库</b></em>
                        <em>├─ <strong class="fwn">ihma.less</strong><b>我的IHMA</b></em>
                        <em>├─ <strong class="fwn">account.less</strong><b>我的账户/我的消息</b></em>
                        <em>├─ <strong class="fwn">popup.less</strong><b>弹窗</b></em>

                        <em><b class="red">页面上使用的都是.css 压缩版本</b></em>
                        <em><b class="red">.less文件都需要引用config.less</b></em>

                    <em><strong>js：</strong></em>
                        <em>├─ <strong class="fwn">common.js</strong><b>公共/配置js</b></em>
                        <em>├─ <strong class="fwn">html5.js</strong></em>

                        <em>├─ <strong>app</strong><b>项目js</b></em>
                            <em>├─ <strong class="fwn">account.js</strong></em>
                            <em>├─ <strong class="fwn">course.js</strong></em>
                            <em>├─ <strong class="fwn">home.js</strong></em>
                            <em>├─ <strong class="fwn">ihma.js</strong></em>
                            <em>├─ <strong class="fwn">list.js</strong><b>列表js</b></em>

                        <em><strong>plugins</strong><b>插件</b></em>

                    <em><strong>htmls：</strong><b>html文件</b></em>
                    <em><strong>images：</strong><b>图片文件</b></em>
                    <em><strong>pic：</strong><b>无用的图片</b></em>

            </pre>
        </div>
        <h3 data-id="less">Less说明：</h3>
            <div class="clearfix">
                <h4>变量：</h4>
                <div class="api-left">
                    <span>@w  =>  1000px;</span>
                </div>
            </div>
            <div class="clearfix">
                <h4>颜色：</h4>
                <div class="api-left">
                    <span>@red    =>  <b style="color:#fe2a00;">#fe2a00;</b></span>
                    <span>@red2  =>  <b style="color:#ee5837;">#ee5837;</b></span>
                    <span>@red3  =>  <b style="color:#ffb49a;">#ffb49a;</b></span>
                    <span>@blue    =>  <b style="color:#0354a6;">#0354a6;</b></span>
                    <span>@blue2  =>  <b style="color:#3270b7;">#3270b7;</b></span>
                    <span>@blue3  =>  <b style="color:#7191ca;">#7191ca;</b></span>
                    <span>@blue4  =>  <b style="color:#a8c6e8;">#a8c6e8;</b></span>
                    <span>@blue5  =>  <b style="color:#0b66a8;">#0b66a8;</b></span>
                </div>
                <div class="api-left">
                    <span>@green    =>  <b style="color:#b1cf89;">#b1cf89;</b></span>
                    <span>@orange  =>  <b style="color:#f89e7b;">#f89e7b;</b></span>
                    <span>@white    =>  <b style="color:#fff;">#fff;</b></span>
                    <span>@black    =>  <b style="color:#000;">#000;</b></span>
                    <span>@black2  =>  <b style="color:#333;">#333;</b></span>
                    <span>@black3  =>  <b style="color:#666;">#666;</b></span>
                    <span>@gray    =>  <b style="color:#999;">#999;</b></span>
                    <span>@gray2  =>  <b style="color:#efefef;background:#fff;">#efefef;</b></span>
                </div>
                <div class="api-left">
                    <span>@bg    =>  <b style="color:#eee;background:#fff;">#eee;</b></span>
                    <span>@bg2  =>  <b style="color:#f6f6f6;background:#fff;">#f6f6f6;</b></span>
                    <span>@border    =>  <b style="color:#ebebeb;background:#fff;">#ebebeb;</b></span>
                    <span>@link-blue    =>  <b style="color:#0c70bd;">#0c70bd;</b></span>
                    <span>@link-black  =>  <b style="color:#333;">#333;</b></span>
                </div>
            </div>
            <div class="clearfix">
                <h4>字体/其他：</h4>
                <div class="api-left2">
                    <span>@yahei    =>  <b style="font-family:'Microsoft YaHei' Arial;">'Microsoft YaHei' Arial;</b></span>
                    <span>@song  =>  <b style="font-family:u5b8bu4f53 Arial;">u5b8bu4f53 Arial;</b> 宋体</span>
                    <span>@font  =>  <b style="font-family:Arial 'Microsoft YaHei';">Arial 'Microsoft YaHei';</b></span>
                    <span>&nbsp;</span>
                    <span>@icon    =>  url(../images/icon.fw.png) no-repeat;</span>
                    <span>@icon2    =>  url(../images/icon2.fw.png) no-repeat;</span>
                    <span>@icon-8  =>  url(../images/icon-png8.fw.png) no-repeat;</span>
                </div>
            </div>
        <h3 data-id="css">CSS说明：</h3>
            <div class="clearfix">
                <h4>命名：</h4>
                <div class="api-left s-b">
                    <span>.con-* 开头的都是公共组件</span>
                        <b>.con-head</b>
                        <b>.con-crumbs</b>
                        <b>.con-title</b>
                        <b>.con-table</b>
                        <b>.con-search</b>
                        <b>.con-sort</b>
                        <b>.con-tab</b>
                    <span>.icon-* 开头的都是图标</span>
                    <span>.btn-* 开头的都是按钮</span>
                </div>
                <div class="clearfix"></div>
                <h4>Class：</h4>
                <div class="api-left s-b">
                    <span>.show 显示，配合js</span>
                    <span>.hide 隐藏，配合js</span>
                    <span>.no-line  无边线</span>
                    <span>.no-line-b  无底边线</span>
                    <span>.no-line-r  无右边线</span>
                </div>
            </div>
        <h3 data-id="php">PHP语法说明：</h3>
        <div class="clearfix">
                <h4>路径：</h4>
                <div class="api-left-long">
                    <span><b>&lt;{$cssPath}&gt;</b>  =>  /css</span>
                    <span><b>&lt;{$jsPath}&gt;</b>  =>  /js</span>
                    <span><b>&lt;{$imgPath}&gt;</b>  =>  /images</span>
                    <span><b>&lt;{$picPath}&gt;</b>  =>  /pic</span>
                    <span><b>&lt;{$jsGalleryPath}&gt;</b>  =>  http://f3.v.veimg.cn/f2e/gallery</span>
                    <span><b>&lt;{$version}&gt;</b>  =>  年月日时分秒 201404111432</span>
                </div>
            </div>
        <h3>2：┌ ┬ ┐├ ┼ ┤└ ┴ ┘─</h3>
        <div class="api-con">
            <p class="api-space"></p>

            <pre>
                <strong>使用说明：</strong>
                <span><b>&lt;a&gt;</b>  按钮</span>
                <span><b>&lt;a class="btn btn-green"&gt;按钮文本&lt;/a&gt;</b></span>

                <span><i>btn：</i>基础按钮，h30，左右padding15px</span>
                <span><i>btn-big：</i>大一号按钮，h40</span>
                <span><i>btn-icon：</i>图标按钮</span>
                <span><i>btn-icon2：</i>弹窗图标按钮</span>

                <span><i style=" 365px;">btn-green、btn-blue、btn-orange、btn-gray：</i>按钮颜色</span>
                <span><i>p522：</i>padding: 5px 22px;</span>
                <span><i>p1041：</i>padding: 10px 41px; 其他类推</span>
            </pre>
        </div>
    </div>
    <div class="api-nav">
        <a>目录/文件说明</a>
        <a>Less说明</a>
        <a>CSS说明</a>
        <a>PHP语法说明</a>
    </div>

另外一个demo页面：http://fex.baidu.com/webuploader/getting-started.html

使用的是Bootstrap ScrollSpy 用法，用法如http://justcoding.iteye.com/blog/1955564