导航栏跟随滚动条滑动

<!DOCTYPE html>
<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>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    /* 1rem = 100px */
    /* :root {
        font-size: 13.33333vw;
    } */
    li {
        list-style: none;
    }
    .asideMenu {
        position: fixed;
        top: 40%;
        right: 10%;
        height: 300px;
        background: #ffc0cb;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .asideMenu li {
        height: 30px;
        line-height: 30px;
        font-size: 16px;
        text-align: center;
        cursor: pointer;
    }
    .asideMenu li:hover {
        color: red;
    }
    .container {
        width: 1200px;
        margin: 0 auto ;
    }
    .container div {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 400px;
    }
    .container div:nth-child(odd) {
        /* background: cyan; */
        background: linear-gradient(to bottom, #03899A,#7DB6BC );
    }
    .container div:nth-child(even) {
        background: white;
    }
    .on {
        color: red;
        background: yellowgreen;
        border-bottom: 1px solid cyan;
    }
    .goTop {
        margin-top: 20px;
        cursor: pointer;
    }
</style>
<body>

    <div class="asideMenu">
        <li class="a on">最新资讯</li>
        <li class="b">手游测评</li>
        <li class="c">手游下载</li>
        <li class="d">游戏专辑</li>
        <li class="e">应用下载</li>
        <li class="f">游戏美宣</li>
        <li class="g">排行榜</li>
        <div class="goTop">回到顶部</div>
    </div>

    <div class="container">
        <div class="aa">最新资讯</div>
        <div class="bb">手游测评</div>
        <div class="cc">手游下载</div>
        <div class="dd">游戏专辑</div>
        <div class="ee">应用下载</div>
        <div class="ff">游戏美宣</div>
        <div class="gg">排行榜</div>
    </div>
    <div class="main" style="height: 2000px;"></div>
    
</body>
<script>
    var a = document.querySelector(".aa").clientHeight;
    var b = document.querySelector(".bb").clientHeight;
    var c = document.querySelector(".cc").clientHeight;
    var d = document.querySelector(".dd").clientHeight;
    var e = document.querySelector(".ee").clientHeight;
    var f = document.querySelector(".ff").clientHeight;
    var g = document.querySelector(".gg").clientHeight;
    var goTop = document.querySelector(".goTop");
    
  
    window.addEventListener("scroll",function(){
        var wstop = document.documentElement.scrollTop || document.body.scrollTop;
        if(wstop >= 0 && wstop < a){
                wstop = a+b;
                $(".a").addClass("on").siblings().removeClass("on");
            }else if(wstop >= a && wstop < (a+b)){
                wstop = a + b + c;
                $(".b").addClass("on").siblings().removeClass("on");
               
            }
            else if(wstop >= (a+b) && wstop < (a+b+c)){
                wstop = a + b + c + d;
                $(".c").addClass("on").siblings().removeClass("on");
               
            }else if(wstop >= (a + b + c) && wstop < (a + b + c + d)){
                wstop = a + b + c + d + e;
                $(".d").addClass("on").siblings().removeClass("on");
               
            }
            else if(wstop >= (a + b + c + d) && wstop < (a + b + c + d + e)){
                wstop = a + b + c + d + e + f;
                $(".e").addClass("on").siblings().removeClass("on");
               
            }else if(wstop >= (a + b + c + d + e) && wstop < (a + b + c + d + e + f)){
                wstop = a + b + c + d + e + f + g;
                $(".f").addClass("on").siblings().removeClass("on");
               
            }else {
                wstop = a + b + c + d + e + f + g;
                $(".g").addClass("on").siblings().removeClass("on");
            }
    },false)
    $(".asideMenu li").on("click",function(){
        $(this).addClass("on").siblings().removeClass("on");
        var _index = $(this).index();
        // console.log(_index);
        if(_index == 0) {
            // document.documentElement.scrollTop = document.body.scrollTop = 0;//原生js无动画效果
            $("body,html").animate({scrollTop: 0},300);//jQuery有动画效果
        }else if(_index == 1) {
            // document.documentElement.scrollTop = document.body.scrollTop = a;
            $("body,html").animate({scrollTop: a},300);
        }else if(_index == 2) {
            // document.documentElement.scrollTop = document.body.scrollTop = a + b;
            $("body,html").animate({scrollTop: a + b},300);
        }else if(_index == 3) {
            // document.documentElement.scrollTop = document.body.scrollTop = a + b + c;
            $("body,html").animate({scrollTop: a + b + c},300);
        }else if(_index == 4) {
            // document.documentElement.scrollTop = document.body.scrollTop = a + b + c + d;
            $("html,body").animate({scrollTop: a + b + c + d},500);
        }else if(_index == 5) {
            // document.documentElement.scrollTop = document.body.scrollTop = a + b + c + d + e;
            $("html,body").animate({scrollTop: a + b + c + d + e},500);
        }else if(_index == 6) {
            // document.documentElement.scrollTop = document.body.scrollTop = a + b + c + d + e + f;
            $("html,body").animate({scrollTop: a + b + c + d + e + f},500);
        }
    });
    goTop.onclick = function(){
        $("html,body").animate({scrollTop:"0px"},1500);//500毫秒完成回到顶部动画
    }
</script>

</html>
在这里插入图片描述
原文链接：https://blog.csdn.net/bznhlhh/article/details/115937165