又一个随内容滚动而变化的侧边/左侧目录导航

前面介绍过一个侧边/左侧目录导航随内容滚动而变化，今天再介绍一个。

随内容滚动而变化的侧边/左侧目录导航

下面是实现代码

HTML

<div class="help-container">
    <ul id="nav" class="help-nav">
        <li class="current"><a class="btn" href="#c1">宝塔跑分</a></li>
        <li><a class="btn" href="#c2">UnixBench跑分</a></li>
        <li><a class="btn" href="#c3">端口带宽</a></li>
        <li><a class="btn" href="#c4">硬盘IO</a></li>         
        <li><a class="btn" href="#c5">CPU压测</a></li>
    </ul>
    <div class="help-content">
        <section id="c1">
            <h2>宝塔跑分</h2>                
        </section>
        <section id="c2">
            <h2>UnixBench跑分</h2>
        </section>
        <section id="c3">
            <h2>端口带宽</h2>
        </section>
        <section id="c4">
            <h2>硬盘IO</h2>
        </section>           
        <section id="c5">
            <h2>CPU压测</h2>
        </section>
    </div>
</div>

CSS

*{margin:0; padding:0;}
.header{width:100%; height:60px; background:#fff;}
.help-banner{width:100%; height:80px; background:#e52e17;}
.help-banner h2{font-size:24px; color:#fff; line-height:24px; padding:26px 0 26px 30px;}
.help-container{margin-top:10px;}
#nav{position:fixed; top:180px; left:70px;}
ul,li{list-style-type:none;}
.btn{width:160px; display:block; height:40px; line-height:40px; font-size:14px; font-weight:normal; text-align:center; border:1px solid #fe5050; border-radius:3px; cursor:pointer;    -webkit-transition: background ease .2s, color ease .2s;}
#nav li{margin-bottom:10px;}
#nav li a{color:#333; text-decoration: none;}
#nav li.current a{background:#fe5050; color:#fff;}
.help-content{float:left; margin-left:300px}
.help-content section{width:700px; height:300px; margin-bottom:20px;}

JS

$("#nav").navScrollSpy({
  navContainer: '#nav',
  current:"current",
  scrollSpeed: 750
});

execcodegetcode

代码解释

1、HTML help-content div是内容区域，而 section 则是各目录的内容单元。

2、CSS #nav{position:fixed; top:180px; left:70px;} 设置导航位置。

.help-content{float:left; margin-left:300px} 设置内容区域的位置。

.help-content section{width:700px; height:300px; margin-bottom:20px;} 设置目录内容单元的区域大小及位置。

3、JS scrollSpeed: 750 设置滚动速度。

推荐

本文介绍的这个内容目录导航代码比较复杂，使用修改起来不太容易，故强烈推荐使用另一个随内容滚动而变化的侧边目录导航。