用LiftEffect.js快速实现楼层点亮的一个案例

LiftEffect.js下载地址：http://www.daimabiji.com/mainmenus/4075.html

要求头部卷去时导航栏固定，点击不同导航到达不同楼层，楼层变化时导航栏变化。

最终效果大致如下图：

HTML使用演示：

[code]<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">
第五层的内容

JS调用：

[code]    <script type="text/javascript">
$(function(){
LiftEffect({
"control1": ".ttt", 						  //侧栏电梯的容器
"control2": ".shop-left-tt",                           //需要遍历的电梯的父元素
"target": [".f1",".f2",".f3",".f4",".f5"], //监听的内容，注意一定要从小到大输入
"current": "hoverqq" 						  //选中的样式
});
})
</script>

根据自己需求修改了部分效果后的LiftEffect.js代码段：

[code]

// LiftEffect({
// 	"control1": ".lift2", 						  //侧栏电梯的容器
// 	"control2": "#ccc",                           //需要遍历的电梯的父元素
// 	"target": [".dianti1",".dianti2",".dianti3"], //监听的内容，注意一定要从小到大输入
// 	"current": "xuanzhong" 						  //选中的样式
// });

function LiftEffect(json){

var array=[];

for(var i =0; i<json.target.length;i++){
var t = $(json.target[i]).offset().top;
array.push(t);

}

function Selected(index){
$(json.control2).children().eq(index).addClass(json.current).siblings().removeClass(json.current);
}

$(window).on("scroll",Check);

function Check(){

var wst = $(window).scrollTop();
var key =0;
var flag = true;
for(var i =0; i<array.length; i++){
key++;
if(flag){

if(wst >= array[array.length-key]-150){
var index = array.length-key;
flag = false;
}else{
flag=true;
}

}
}
Selected(index);
}

$(json.control2).children().on("click",function(){

$(window).off("scroll");
var index = $(this).index();
Selected(index);

var flag = true;
for(var i =0; i<array.length; i++){

if(flag){

if(index == i){
$("html,body").stop().animate({
"scrollTop": array[i]-50
},500,function(){
$(window).on("scroll",Check);
});
flag = false;
}else{
flag=true;
}

}
}

});

}