<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>楼层导航</title>
<style>
* {
margin: 0;
padding: 0;
}
.content {
width: 900px;
margin: 10px;
margin: 0 auto;
font-size: 30px;
}
.one {
height: 400px;
background-color: orangered;
}
.two {
height: 600px;
background-color: yellowgreen;
}
.three {
height: 700px;
background-color: blue;
}
.four {
height: 600px;
background-color: pink;
}
.five {
height: 900px;
background-color: rgb(42, 230, 255);
}
ul {
list-style: none;
position: fixed;
top: 50%;
right: 20px;
transform: translateY(-50%);
margin-bottom: 10px;
}
ul li {
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
margin-bottom: 2px;
background-color: rgb(109, 198, 245);
}
ul li:last-child {
display: none;
}
</style>
</head>
<body>
<div class="content">
<div class="one">我是第一模块</div>
<div class="two">我是第二模块</div>
<div class="three">我是第三模块</div>
<div class="four">我是第四模块</div>
<div class="five">我是第五模块</div>
</div>
<ul class="navgtion">
<li>导航区一</li>
<li>导航区二</li>
<li>导航区三</li>
<li>导航区四</li>
<li>导航区五</li>
<li>返回顶部块</li>
</ul>
<script>
// 获取元素节点
const navgtion=document.querySelector('.navgtion')
const navgtion_list=navgtion.querySelectorAll('li')
let num=0
// 定义一个变量存储我们高度的数据
const arr=[0,400,1000,1700,2300]
// 给文档绑定滚动事件
document.addEventListener('scroll',changLi)
function changLi () {
// console.log(document.documentElement.scrollTop);
// 获取文档滚动时的高度
num=document.documentElement.scrollTop
// 如果num大于数组中的每一项数据
for (let i = 0; i < arr.length; i++) {
if (num>arr[i]) {
// 排他思想 干掉所有颜色 点击哪里哪里变颜色
for (let j = 0; j < navgtion_list.length; j++) {
navgtion_list[j].style.color='red'
}
navgtion_list[i].style.color='black'
}
}
// 当滚动条大于200的时候返回顶部 否则隐藏
// 核心思想 导航器里最后一个模块(返回顶部模块)
if (num>200) {
navgtion_list[navgtion_list.length-1].style.display='block'
}else {
navgtion_list[navgtion_list.length-1].style.display='none'
}
}
for (let m = 0; m < navgtion_list.length; m++) {
navgtion_list[m].onclick=function() {
for (let n = 0; n < navgtion_list.length; n++) {
navgtion_list[n].style.backgroundColor='yellow'
}
navgtion_list[m].style.backgroundColor='#ff0'
// 把数组里储存的高度赋值给文档头部Y轴坐标
document.documentElement.scrollTop=arr[m]
}
}
</script>
</body>
</html>
