25. 仿淘宝固定侧边栏案例

思路分析：

1、 需要用到页面滚动事件scroll， 因为是页面滚动， 所以事件源是document

2、 滚动到某个位置， 判断页面被卷去的上部值

3、 页面被卷去的头部： 通过window.pageYOffset 获取， 如果被卷去的是左侧， 用window.pageXOffset

4、注意：元素被卷去的头部是element.scrollTop,如果是页面被卷去头部则是window.pageYOffset

        var slideBar = document.querySelector('.slideBar');

        var goBack = document.querySelector('.goBack');

        var banner = document.querySelector('.banner');

        var main = document.querySelector('.main');

        // 获取滚动前banner区域距离页面顶部的距离

        var bannerTop = banner.offsetTop;

        // console.log(bannerTop);

        var slideBarTop = slideBar.offsetTop - bannerTop;

        //获取滚动前main区域距离页面顶部的距离

        var mainTop = main.offsetTop;

        document.addEventListener('scroll', function(e) {

            // console.log(window.pageYOffset);

            //2、当页面被卷去的头部大于等于220px 让侧边栏改为固定定位

            if (window.pageYOffset >= bannerTop) {

                slideBar.style.position = "fixed";

                slideBar.style.top = slideBarTop + 'px';

            } else {

                slideBar.style.position = "absolute";

                slideBar.style.top = '300px';

            }

            //3、当页面滚动到mian区域时，让返回顶部显示

            if (window.pageYOffset >= mainTop) {

                goBack.style.display = "block";

            } else {

                goBack.style.display = "none";

            }

        })