JavaScript实现淘宝右侧导航栏功能

JavaScript实现淘宝右侧导航栏功能

html:

        <div class="slider_bar">
            <span class="yi">1</span>
            <span class="er">2</span>
            <span class="san">3</span>
            <span class="goBack">返回顶部</span>
        </div>
        <div class="non"></div>
        <div class="header"></div>
        <div class="banner"></div>
        <div class="main"></div>

css:

<style>
        .slider_bar{
            position: absolute;
            width: 70px;
            height: 20px;
            border: 1px solid red;
            top: 500px;
            right: 0;
        }
        span{
            display: flex;
            border: 1px solid red;
            
        }
        .goBack{
            display: none;
        }
        .non{
            width: 500px;
            height: 200px;
            border: 1px solid red;
        }
        .header{
            width: 500px;
            height: 200px;
            background-color: aqua;
            margin-top: 0;
        }
        .banner{
            width: 500px;
            height: 500px;
            background-color: bisque;
        }
        .main{
            width: 500px;
            height: 1000px;
            background-color: black;
        }
    </style>

javascript:

<script>
            var yi = document.querySelector('.yi');
            var er = document.querySelector('.er');
            var san = document.querySelector('.san');
            
            var sliderbar = document.querySelector('.slider_bar');
            var banner = document.querySelector('.banner');
            var bannerTop = banner.offsetTop;
            var sliderbarTop = sliderbar.offsetTop - bannerTop;
            var main = document.querySelector('.main');
            var goBack = document.querySelector('.goBack');
            var mainTOP = main.offsetTop;
            console.log(sliderbarTop);
            document.addEventListener('scroll', function(){
                if(window.pageYOffset >= bannerTop){
                    sliderbar.style.position = 'fixed';
                    sliderbar.style.top = sliderbarTop + 'px';
                } else {
                    sliderbar.style.position = 'absolute';
                    sliderbar.style.top = '500px';
                };
                if(window.pageYOffset >= mainTOP){
                    goBack.style.display = 'block';
                } else {
                    goBack.style.display = 'none';
                };
            });
            goBack.addEventListener('click', function(){
                window.scroll(0,0);
            })
        </script>