JavaScript-227：仿淘宝固定侧边栏

效果图

结构

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

CSS

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

        .header {
    
    
            width: 1200px;
            height: 150px;
            background-color: purple;
            margin: 10px auto;
        }

        .banner {
    
    
            width: 1200px;
            height: 250px;
            background-color: skyblue;
            margin: 10px auto;
        }

        .main {
    
    
            width: 1200px;
            height: 1000px;
            background-color: yellowgreen;
            margin: 10px auto;
        }

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

JS

  var slideBar = document.querySelector(".slide-bar");
    var banner = document.querySelector(".banner");
    var bannerTop = banner.offsetTop; //banner到达页面顶部时，页面被卷去的头部的大小，一定要写到滚动的外面
    var slideBarTop = slideBar.offsetTop - bannerTop;  //固定定位之后，应该变化的数值
    console.log(slideBarTop);
    var main = document.querySelector(".main");
    var goBack = document.querySelector(".goBack");
    var mainTop = main.offsetTop;

    //1,页面滚动事件 scroll
    document.addEventListener("scroll", function ()
    {
    
    
        if (window.pageYOffset >= bannerTop)
        {
    
    
            slideBar.style.position = "fixed";
            slideBar.style.top = slideBarTop + "px";
        }
        else
        {
    
    
            slideBar.style.position = "absolute";
            slideBar.style.top = 300 + "px";
        }

        //2，当页面滚动到main盒子，就显示 goBack 模块（“返回顶部”）
        if (window.pageYOffset >= mainTop)
        {
    
    
            goBack.style.display = "block";
        }
        else
        {
    
    
            goBack.style.display = "none";
        }
    })