原生js实现楼层联动(只适用W3C标准）-CSDN博客

本文链接：https://blog.csdn.net/weixin_43735788/article/details/84392816
1、复制并运行代码，即可显示效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
	*{
		margin: 0;
		padding: 0;
		font-size:12px;
	}
	ul{
		list-style:none;
	}
	.floorNav{
		width:30px;
		height:auto;
		border:1px solid #ccc;
		position:fixed;
		top:100px;
		left:30px;
        z-index:2;
	}
	.floorNav li{
		width:30px;
		height:30px;
		line-height:30px;
		text-align:center;
		position:relative;
		border-bottom:1px solid #ccc;
	}
	.floorNav li.hover span{
		display:block;
		background: #f30;
		color:#fff;
	}
	.last{
		border:none;
		background: #f30;
		color:#fff;
	}
	.floorNav li span{
		width:30px;
		height:30px;
		display:none;
		position:absolute;
		top:0;left:0;
		background: #f30;
		color:#fff;
	}
	.floorNav li span.active{
		display:block;
		background: #fff;
		color:#f00;
	}
	.floorNav li.hover span.active{
		background: #f30;
		color:#fff;
	}
	#header,#footer{
		width:800px;
		height:1000px;
		background: #ff7;
        margin: 0 auto;
	}
	#main{
		width:800px;
		height:auto;
		margin:0 auto;
	}
	#main .floor{
		width:800px;
		height:600px;
		line-height:600px;
		text-align:center;
		font-size:50px;
	}
</style>
</head>
<body>
	<!-- 楼层导航 -->
	<ul class="floorNav">
		<li>1F<span>服饰</span></li>
		<li>2F<span>手机</span></li>
		<li>3F<span>数码</span></li>
		<li>4F<span>家电</span></li>
		<li>5F<span>美妆</span></li>
		<li>6F<span>户外</span></li>
		<li class="last">Top</li>
	</ul>
    <!-- 楼层开始 -->
    <div id="header"></div>
    <div id="main">
        <div class="floor" style="background: #f34;">服饰</div>
        <div class="floor" style="background: #f0f;">手机</div>
        <div class="floor" style="background: #345;">数码</div>
        <div class="floor" style="background: #987;">家电</div>
        <div class="floor" style="background: #a6b;">美妆</div>
        <div class="floor" style="background: #0f9;">户外</div>
    </div>
    <div id="footer"></div>
	<script>
        var FloorNav = document.getElementsByClassName('floorNav')[0];
        var NavList  = FloorNav.querySelectorAll('li');
        var NavSpan = FloorNav.querySelectorAll('span');
        var Main = document.getElementById('main');
        var MainFloor = Main.querySelectorAll('div');
        console.log(FloorNav,NavList,Main,MainFloor,NavSpan)
        //记录当前的滚动高度
        var currentHeight = 0;
        // for循环使用es6
        for(let i=0;i<NavList.length-1;i++){
            //滑上左侧列表显示其内容
            NavList[i].addEventListener('mouseover',function () {
                NavList[i].classList.add('hover');
            })
            //离开左侧列表隐藏其内容
            NavList[i].addEventListener('mouseout',function () {
                NavList[i].classList.remove('hover');
            })
            // 点击左侧列表为该项添加class名
            NavList[i].addEventListener('click',function () {
                for(let j=0;j<NavSpan.length;j++){
                    NavSpan[j].classList.remove('active');
                }
                NavSpan[i].classList.add('active');
                var Height = MainFloor[i].offsetTop;
                var timer = setInterval(function() {
                    if(currentHeight < Height-20){
                        currentHeight += 30
                    } else if(currentHeight > Height+20){
                        currentHeight -= 30
                    }else{
                        currentHeight = Height
                        clearInterval(timer)
                    }
                    document.body.scrollTop = currentHeight;
                    document.documentElement.scrollTop = currentHeight;
                },1)
            })
        }
        window.addEventListener('scroll',function() {
            //获取当前滚动高度
            let Sheight = document.documentElement.scrollTop||document.body.scrollTop;
            for(let i=0;i<MainFloor.length;i++){
                let floorHeight = MainFloor[i].offsetTop;
                if(Sheight >= floorHeight && Sheight <= floorHeight+MainFloor[i].clientHeight/2){
                    for(let j=0;j<NavSpan.length;j++){
                        NavSpan[j].classList.remove('active');
                    }
                    NavSpan[i].classList.add('active');
                }
            }
        })
	</script>
</body>
</html>