边栏垂直滚动导航

当前版本:V1 最近更新:20114-9-10 组件作者:stanleyxiao

组件说明

  • 1. 自动滚动到对应ID内容板块;
  • 2. 自动添加当前导航对应的样式;
  • 2014/9/10上线使用

DEMO演示

查看演示

JS代码

<script type="text/javascript" >
        var sideNav=new Scroller({
			navId:"side-nav",//导航ID
			navs:"li",      //导航标签, 取值为标签名li或者class名snav
			conts:["cont01","cont02","cont03","cont04"], //内容板块ID
			cls:"curr" //导航选中class
		});
< /script >

HTML代码

1、内容板块HTML:

<div class="wrap">
    <div id="cont01">第1部分</div>
    <div id="cont02">第2部分</div>
    <div id="cont03">第3部分</div>
    <div id="cont04">第4部分</div>
<div>

2、导航HTML:

< ul  id="side-nav">
    <li class="snav"><a href="javascript:;">第1部分</a></li>
    <li class="snav"><a href="javascript:;">第2部分</a></li>
    <li class="snav"><a href="javascript:;">第3部分</a></li>
    <li class="snav"><a href="javascript:;">第4部分</a></li>
<ul>