有关楼层滚动且对应楼层Nav导航高亮显示

$(document).ready(function(e) {
//定义数组,储存楼层距离顶部的高度(floorsTop)
var floorsTop=[];
function floorsTopF(){
for(var i=0; i<$(".floors").length;i++){
floorsTop[i]=($(".floors").eq(i).offset().top)-40;
}
}
//获取每一个楼层距离Top的高度; 200 300 400 500 / 110 210 310 410

function floorsNavF(){
	var sTop = $(document).scrollTop(); //获取垂直滚动的距离 
	
	如果滚动条的高度大于楼层一的高度
	if(sTop>floorsTop[0]){
		$("#floorsNav").fadeIn(500);
	}else{
		$("#floorsNav").fadeOut(500);
	}

	for(var i=0; i<=$("#floorsNav li").length;i++){	   //楼层个数
			if( sTop >= floorsTop[i] && sTop < floorsTop[i+1] ){	
				$("#floorsNav li").removeClass("on");				
				$("#floorsNav li").eq(i).addClass("on");
			}else if(sTop >= floorsTop[i] && sTop <$("#endhdd").offset().top){
				$("#floorsNav li").removeClass("on");		
				$("#floorsNav li").eq(i).addClass("on");
			}else if(sTop>$("#endhdd").offset().top){
				$("#floorsNav li").removeClass("on");
			}
	}
}

$(window).scroll(function(e){
	floorsTopF();
	floorsNavF();
});

$("#floorsNav li").each(function(i) {
	$(this).click(function(){
		var num=floorsTop[i]+20;
		$('html, body').animate({scrollTop: num}, 300);
	})
});

});

posted @ 2015-08-22 09:07  小数  阅读(517)  评论(0编辑  收藏  举报