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

最新推荐文章于 2021-01-14 01:13:53 发布

weixin_30470857

最新推荐文章于 2021-01-14 01:13:53 发布

阅读量184

点赞数

原文链接：http://www.cnblogs.com/mcat/p/4749544.html

版权

$(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);
    })
});

});

转载于:https://www.cnblogs.com/mcat/p/4749544.html