• 有关楼层滚动且对应楼层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);
    	})
    });
    

    });

    通过分享,结交好友~ 如本文对您有益,请给予关注。转载请注明出处!-- 小数
  • 相关阅读:
    BZOJ BLO 1123 (割点)【双连通】
    P4291 [HAOI2008]排名系统
    P3165 [CQOI2014]排序机械臂
    P3224 [HNOI2012]永无乡
    P1169 [ZJOI2007]棋盘制作
    P2303 [SDOi2012]Longge的问题
    P2216 [HAOI2007]理想的正方形
    P2473 [SCOI2008]奖励关
    P2617 Dynamic Rankings
    P2518 [HAOI2010]计数
  • 原文地址:https://www.cnblogs.com/mcat/p/4749544.html
Copyright © 2020-2023  润新知