var $jds = $(".louceng .jd");
var $lis = $(".subnav ul li");
var arr = [];
$jds.each(function(i){
arr[i] = $(this).offset().top;
})
$(document).scroll(function(){
var v = $(this).scrollTop();
// 到合适的位置出现楼梯导航
if(v>arr[0]){
$(".subnav").show();
} else {
$(".subnav").hide();
}
// 在滚动过程中,需要判断处于哪个楼层
// 让对应的导航的 li 标签高亮显示,其他的默认
$jds.each(function(i){
if(v>arr[i]){
$lis.eq(i).addClass("current")
.siblings().removeClass("current");
}
})
})
//点击电梯导航到相应的页面
$lis.click(function(){
var idx = $(this).index();
$("html,body").animate({"scrollTop":arr[idx]},500);
})
jQuery - 页面楼梯导航实例