仿淘宝侧边栏 js代码

<script>
        //先获取侧边栏
        var sliderbar = document.querySelector('.slider-bar');
        //获取banner 
        var banner = document.querySelector('.banner');
        //把banner距离上滚动 作为一个灵活的变量存储 bannerTop就是距离顶部的距离
        var bannerTop = banner.offsetTop;
        //让侧边栏改为固定定位后, 始终保持在当前位置 
        // 用开始侧边栏距离顶部距离 减去 卷去banner距离顶部的距离  就得出侧边栏最终的位置
        var sliderbarTop = sliderbar.offsetTop - bannerTop;
        // 获取main 主体元素
        var main = document.querySelector('.main');
        var goBack = document.querySelector('.goBack');
        //得到 main的offsetTop值   就是距离顶部的距离
        var mainTop = main.offsetTop;
        //注册事件
        //如果页面被卷曲的头部大于banner到顶栏了数值的时候 就改为固定定位 否则就改为绝对定位
        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 = '300px';
            }
            if (window.pageYOffset >= mainTop) {
                goBack.style.display = 'block'
            } else {
                goBack.style.display = 'none'
            }
        })
    </script>