var aDiv = document.querySelectorAll(".wrap div")
var floors = document.querySelectorAll(".floor div")
var html = document.documentElement
var arr = [] //存储所有内容div的距离文档顶部的值
var current=0 //当前所见的div的序号 current当前
for (var i = 0; i < aDiv.length; i++) {
arr.push(aDiv[i].offsetTop)//获取所有div的offsettop值
}//每一个div距离顶部的距离
console.log(arr)
window.οnscrοll=function(){ //onscroll在元素滚动条滚动式触发的事件
// console.log(html.scrollTop)
var s = html.scrollTop+window.innerHeight/2
//整个文档滚动时距离顶部的距离
for (var i = 0; i < arr.length; i++) {
if(s>arr[i]&&s<arr[i+1]){
current = i
}
if(s>arr[arr.length-1]){
current=arr.length-1
}//到最后一楼
}
for (var i = 0; i < aDiv.length; i++) {
floors[i].style.color="black"
}
floors[current].style.color="red" //改变楼层文字的颜色
}
for (var i = 0; i < floors.length; i++) {
floors[i].index=i
floors[i].οnclick=function(){
html.scrollTo({
top:arr[this.index],
behavior:"smooth" //平滑
})
}
}