阿灯的个人小站

越努力越幸运~


边栏垂直滚动导航

发布时间:2018-10-08 作者:阿灯 阅读量:90
<div class="wrap">
    <div id="cont01">第1部分</div>
    <div id="cont02">第2部分</div>
    <div id="cont03">第3部分</div>
    <div id="cont04">第4部分</div>
</div>
<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>
<script src="scroller.min.js"></script>
<script>
    var sideNav=new Scroller({
        navId:"side-nav",//浮动导航的ID
        navs:"li", //导航链接, 可以用标签名或者class名,例如:li或者snav
        conts:["cont01","cont02","cont03","cont04"], //内容板块ID
        cls:"curr", //导航选中class
        drag:true //是否能拖动
    });
</script>


DEMO下载:边栏垂直滚动导航

来源:https://tgideas.qq.com/doc/frontend/component/pc/scroller.html

标签云

© adeng.y 粤ICP备17049299号
Catfish Blog | 后台