api小案例五：仿淘宝 侧边栏固定

页面效果：


小伙伴们可自行补全css样式

<div class="slider-bar">
        <span class="goBack">返回顶部</span>
    </div>
    <div class="top w">头部区域</div>
    <div class="cont w">中间区域</div>
    <div class="main w">主体部分</div>
    <script>
        const slider = document.querySelector('.slider-bar');
        const goBack = document.querySelector('.goBack');
        const hea = document.querySelector('.top');
        const han = document.querySelector('.cont');
        const main = document.querySelector('.main');

        // hea 距离顶部的高度
        const hedtop = han.offsetTop
        // han距离hea 的高度
        const hantop = slider.offsetTop - hedtop
        // 主体距离顶部高度
        const maintop = main.offsetTop;
        console.log(slider.offsetTop);
        document.addEventListener('scroll', function () {

            if (window.pageYOffset > 172) {
                slider.style.position = 'fixed'
                // 因为 固定定位后 会向下跑  
                slider.style.top = hedtop + 'px'
            } else {
                slider.style.position = 'absolute'
                slider.style.top = '300px'
            }
            // 显示 返回
            if (window.pageYOffset >= maintop) {
                goBack.style.display = 'block'
            } else {
                goBack.style.display = 'none'
            }

            goBack.addEventListener('click', function () {
                document.documentElement.scrollTop -= 50;
            })
        })

秃头桑的知识能力有限，如果有写的不对的地方，还请各位大佬批评指正，各位小伙伴如果有什么想和秃头桑说的欢迎在下方留言。