js+html+css仿淘宝固定侧边栏

功能概要

将页面分为四部分，header区域、banner区域、main区域以及侧边栏

1. 当页面向下滑动，header区域隐藏时，右侧侧边栏固定在页面上不继续滑动
2. 当页面向上滑动，header区域显示时，右侧侧边栏正常随着页面滚动
3. 当页面向下滑动，header区域以及banner区域隐藏时，右侧侧边栏显示其他相关信息
4. 当页面向上滑动，header区域以及banner区域显示时，右侧侧边栏隐藏其他相关信息
5. 点击返回顶部，页面以动画形式向上移动

效果展示

实现代码

html

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

css

.slider-bar {
    position: absolute;
    right: 4%;
    top: 300px;
    width: 20px;
    font-size: 14px;
    text-align: center;
    height: 80px;
    background: #e94242;
}

.goBack {
    display: none;
}

.header {
    margin: 0 auto;
    width: 90%;
    height: 200px;
    background-color: #969696;
}

.banner {
    margin: 0 auto;
    margin-top: 20px;
    width: 90%;
    height: 400px;
    background-color: #856c43;
}

.main {
    margin: 0 auto;
    margin-top: 20px;
    width: 90%;
    height: 800px;
    background-color: #64b9d5;
}

js

window.addEventListener('pageshow',function () {
    var header = document.querySelector('.header');
    var banner = document.querySelector('.banner');
    var sliderbar = document.querySelector('.slider-bar');
    var main = document.querySelector('.main');
    var goBack = document.querySelector('.goBack');
    // 获取相对于body的偏移
    var sliderbarTop = sliderbar.offsetTop;
    var bannerTop = banner.offsetTop;
    var mainTop = main.offsetTop;
    // 页面滚动监听事件
    document.addEventListener('scroll',function () {
        // 获取页面滚动上卷距离 而不是元素
        //  如果页面滚动上卷距离超过 Banner距离到body偏移 则固定右侧侧边栏
        if (window.pageYOffset >= bannerTop) {
            sliderbar.style.position = 'fixed';
            sliderbar.style.top = sliderbarTop - bannerTop + 'px';
        } else {
            sliderbar.style.position = 'absolute';
            sliderbar.style.top = '300px';
        }
        //  如果页面滚动上卷距离超过 main距离到body偏移 则显示文字
        if (window.pageYOffset >= mainTop) {
            goBack.style.display = 'block';
        } else {
            goBack.style.display = 'none';
        }

    //  点击返回顶部
        goBack.addEventListener('click',function () {
            animate(window,0,15);
        })

    //    动画函数
        function animate(obj, target, timeout,callback) {
            // 清空已有的定时器
            clearInterval(obj.timer);
            // 为每个对象开辟一个定时器
            obj.timer = setInterval(function () {
                // 移动步长
                var step = (target - window.pageYOffset) / 10;
                // 判断是否为前进还是后退
                step = step > 0? Math.ceil(step): Math.floor(step);
                if (window.pageYOffset == target) {
                    clearInterval(obj.timer);
                    callback && callback();
                }
                window.scroll(0,window.pageYOffset + step);
            },timeout)
        }
    })
})

注意点

以上使用的window.pageYOffset计算页面被卷去的头部距离具有一定的兼容性问题，一般被卷去的头部计算方法有以下几种：

1. 声明了DTD，使用document.documentElement.scrollTop
2. 未声明DTD，使用document.body.scrollTop
3. IE9以上支持，window.pageYOffset

解决兼容性方案：

function getScroll() {
    return {
        left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,
        top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
    };
}

使用： getScroll().top;