zoukankan      html  css  js  c++  java
  • 有关楼层滚动且对应楼层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);
    	})
    });
    

    });

    通过分享,结交好友~ 如本文对您有益,请给予关注。转载请注明出处!-- 小数
  • 相关阅读:
    poj 2406 Power Strings【最小循环节】
    hdoj 2087 剪花布条
    hdoj 1054 Strategic Game【匈牙利算法+最小顶点覆盖】
    hdoj 1151 Air Raid
    hdoj 2502 月之数
    hdoj 1862 EXCEL排序
    hdoj 1200 To and Fro
    hdoj 1150 Machine Schedule【匈牙利算法+最小顶点覆盖】
    hdoj 1068 Girls and Boys【匈牙利算法+最大独立集】
    uva1563
  • 原文地址:https://www.cnblogs.com/mcat/p/4749544.html
Copyright © 2011-2022 走看看