JS---滚动条的实现

楼层的定位与切换

  - 获取html的元素
  - 统计高度
  - 重置文本元素颜色
  - 网页监听事件【onscroll】

前言，由于该文章重点是在js部分，并且部分代码与上一篇文章有交叉，所以有疑惑的伙伴可以结合上一篇文章来看上一篇文章，由于该文章主要讲js部分，所以这里笔者直接给出相应的Html和css的样式，
HTML如下

<!-- 楼层定位 start -->
     <div class="content">
        <div class="wrap">
            <div class="youxuan item">京东优选</div>
            <div class="miaosha item">京东秒杀</div>
            <div class="guangchang item">京东广场</div>
            <div class="gouwu item">京东购物</div>
        </div>

        <div class="elevator">
            <a href="#">京东<br>优选</a>
            <a href="#">京东<br>秒杀</a>
            <a href="#">京东<br>广场</a>
            <a href="#">京东<br>购物</a>
        </div>
     </div>
    <!-- 楼层定位 end -->

CSS如下

/* 楼层定位 start */
.content{
    width: 100%;
    position: relative;
}

.youxuan{
    margin-top: 20px;
    height: 260px;
    margin-bottom: 20px;
    background-color: antiquewhite;
}

.miaosha{
    margin-bottom: 20px;
    background-color: aquamarine;
    height: 980px;
}

.guangchang{
    background-color: burlywood;
    height: 1050px;
    margin-bottom: 20px;
}

.gouwu{
    background-color: chocolate;
    height: 1100px;
}

.elevator{
    width: 58px;
    height: 252px;
    position: absolute;
    right: 0;
    top: 60px;
}

.elevator a{
    width: 58px;
    height: 38px;
    line-height: 19px;
    font-size: 14px;
    color: #333;
    background-color: #ccc;
    transition: color 0.2 ease;
    display: block;
    padding: 10px 0;
}

.elevator-fix{
    position: fixed;    /* 固定定位 */
    top: 75px;
    animation: eleShow 0.5s ease;
}

@keyframes eleShow{
    0%{
        top: 0;
    }
    100%{
        top: 75px;
    }
}
/* 楼层定位 end */

一，获取html的元素；将我们要用到的html元素引入到js文件中，这里主要与四个元素有关:header，elevator，elevator a，item，获取header的高度与滚动条作比较，从而决定滚动条移动到哪里就不在移动，获取四个item的元素，计算出他们的高度，与滚动条的固定位置作比较，从而决定elevator a中样式的变化；
具体表现如下

代码如下：

//实现楼层定位=======================
let header=document.querySelector('.header');
let items=document.querySelectorAll('.item');
let elevatorA=document.querySelectorAll('.elevator a');
let elevator=document.querySelector('.elevator');

二，统计四个item的高度；
（1）在此之前，还需要定义一个数组用来存放四个item的高度，此外还需计算出header的高度，同时定义一个base变量，将header的高度放进base中，如下

//定义一个数组，存放四个高度
let elevatorArr=[];

let headerHeight=header.offsetHeight;

let base=headerHeight;

（2）遍历items数组，将每一次此得到的item高度存入elevatorArr数组中，如下

//将四个高度放进elevatorArr数组中去
for(let i=0;i<items.length;i++){
    base=base+items[i].offsetHeight;
    elevatorArr.push(base);//将每一次得到的高度放进数组中
}

三，重置文本颜色，将每一个elevatorA元素的文本颜色重置为默认值，如若不重置，则会出现以下情况

重置代码也非常简单，如下

let cleanColor=function(){
    for(let i=0;i<elevatorA.length;i++){ //遍历数组，
        elevatorA[i].style.color=''; //使每一个a标签的文本颜色都为默认值
    }
}

四，网页监听事件；
（1）首先，网页要能够监听到滚动条的变化，这里用onscroll，同时获取滚动条的初始位置，如下

document.onscroll=function(){//当用户滚动页面时，调用该函数
     //用于获取滚动条的初始位置
    let top=document.documentElement.scrollTop||document.body.scrollTop;
    }

（2）当用户滚动页面时，通过判断top值得大小，来改变elevator的css类名，这一段代码也是放在document.onscroll=function()中的，如下

if(top>headerHeight){
        elevator.className='elevator elevator-fix';
    }
    else{
        elevator.className='elevator';
    }

（3）用户滑动页面时，top的值也会发生变化，可以通过将top的值与数组items中的元素作比较，从而相应的改变elevatorA数组中的每一个a标签的css样式，如下

document.onscroll=function(){
    let top=document.documentElement.scrollTop||document.body.scrollTop;

    // let headerHeight=header.offsetHeight;

    if(top>headerHeight){
        elevator.className='elevator elevator-fix';
    }
    else{
        elevator.className='elevator';
    }

    if(top<headerHeight){
        cleanColor();
    }
    else if(top>=headerHeight&&top<elevatorArr[0]){
        cleanColor();
        elevatorA[0].style.color='red';
    }
    else if(top>=elevatorArr[0]&&top<elevatorArr[1]){
        cleanColor();
        elevatorA[1].style.color='red';
    }
    else if(top>=elevatorArr[1]&&top<elevatorArr[2]){
        cleanColor();
        elevatorA[2].style.color='red';
    }
    else if(top>=elevatorArr[2]){
        cleanColor();
        elevatorA[3].style.color='red';
    }
}

至此，有关滚动条的实现就完成了，这个实现操作并不难，但是由于笔者语言组织不太好，伙伴们可以将代码复制下来，询问AI注释，下面使笔者最终的实现效果