JS实现侧边栏 —— 仿淘宝固定侧边栏

固定侧边栏的效果：当页面滑到banner部分时，侧边栏就变成固定定位，不再跟随滚动条往下走；页面再往下滑动，到主体部分时返回顶部的部分显示，否则隐藏。

页面的结构，搭建的比较简单，主要是为了实现js效果的。

具体详细的步骤代码部分有注释的哈。

JS部分：

// 需求：1.当页面划到banner部分时  侧边栏保持位置不变 没到banner区域时侧边栏跟着页面滑动
        // 2.页面再滑动  到main部分时 返回顶部部分显示
        // 获取事件
        var slider_bar = document.querySelector('.slider-bar');
        var banner = document.querySelector('.banner');
        var bannerTop = banner.offsetTop; // 页面被卷去头部的大小:banner距页面顶部的距离
        var slider_bar_top = slider_bar.offsetTop - bannerTop; // 变成固定定位之后的位置
        // console.log(bannerTop);

        var main = document.querySelector('.main');
        var goBack = document.querySelector('.goBack');
        var mainTop = main.offsetTop; // main相对页面顶部的距离

        // 页面滚动事件
        document.addEventListener('scroll', function () {
            // console.log('srcoll');
            // 当页面滚动到banner时，就把侧边栏改为固定定位
            // 距离就是banner距离页面顶部的高度 banner.scrollTop
            if (window.pageYOffset >= bannerTop) {
                slider_bar.style.position = 'fixed';
                slider_bar.style.top = slider_bar_top + 'px';
            } else {
                slider_bar.style.position = 'absolute';
                slider_bar.style.top = '300px';
            }
            // 当页面滑到main区域时 返回顶部部分显示
            if (window.pageYOffset >= mainTop) {
                goBack.style.display = 'block';
            } else {
                goBack.style.display = 'none';
            }
        })

结构和样式：

    <div class="slider-bar">
        <span class="goBack">返回顶部</span>
    </div>
    <div class="header w">头部区域</div>
    <div class="banner w">banner区域</div>
    <div class="main w">主体部分</div>

.slider-bar {
            position: absolute;
            left: 50%;
            top: 300px;
            margin-left: 600px;
            width: 45px;
            height: 130px;
            background-color: pink;
        }

        .w {
            width: 1200px;
            margin: 10px auto;
        }

        .header {
            height: 150px;
            background-color: purple;
        }

        .banner {
            height: 250px;
            background-color: skyblue;
        }

        .main {
            height: 1000px;
            background-color: yellowgreen;
        }

        span {
            display: none;
            position: absolute;
            bottom: 0;
        }

 

实现的效果：