LiftEffect.js下载地址:http://www.lanniaofei.com/tool/zzgj/127.html
要求头部卷去时导航栏固定,点击不同导航到达不同楼层,楼层变化时导航栏变化。
最终效果大致如下图:
1、HTML使用演示:
<div class="ttt">
<div class="shop-left-tt" id="shopnav">
<span class="lift_item hoverqq">点我到第一层</span>
<span class="lift_item">点我到第二层</span>
<span class="lift_item">点我到第三层</span>
<span class="lift_item">点我到第四层</span>
<span class="lift_item">点我到第五层</span>
</div>
</div>
<div class="f1">
第一层的内容
<div class="f2">
第二层的内容
<div class="f3">
第三层的内容
<div class="f4">
第四层的内容
<div class="f5">
第五层的内容
2、JS调用:
<script type="text/javascript">
$(function(){
LiftEffect({
"control1": ".ttt", //侧栏电梯的容器
"control2": ".shop-left-tt", //需要遍历的电梯的父元素
"target": [".f1",".f2",".f3",".f4",".f5"], //监听的内容,注意一定要从小到大输入
"current": "hoverqq" //选中的样式
});
})
</script>