js侧边栏案例

利用滚动事件onscroll，当页面被卷去的头部(window.pageYOfset)大于某个值时，就让侧边栏定位为固定定位fixed，否则就还是绝对定位；

// 滚动事件 onscroll
        document.addEventListener('scroll', function () {
            // 页面被卷去的头部：window.pageYOfset
            if (window.pageYOfset >= bannertop) {
                goBack.style.position = 'fixed';
            } else {
                goBack.style.position = 'absolute';
            }
        })

点击返回顶部，就是让向上滚动的距离变为0；调用提前封装好的animate函数，代码如下：

// 当点击返回顶部，就让窗口滚动到页面最上方
        goBack.addEventListener('click', function () {
            animate(window, 0); //
        });
         动画函数
        function animate(obj, target, callback) { //callback接收回调函数
            clearInterval(obj.timer);

            obj.timer = setInterval(function () {
                // 步长计算公式：(目标位置 - 现在的位置) / 10;
                var step = (target - window.pageYOfset) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step); // Math.ceil()向上取整，Math.floor()向下取整，避免达不到目标位置

                if (window.pageYOfset == target) {
                    // 停止动画,就是停止定时器
                    clearInterval(obj.timer);
                    // 回调函数写在定时器停止的时候
                    // if (callback) { //如果有回调函数传进来
                    //     callback();  //调用回调函数
                    // }
                    callback && callback(); //都真才执行回调函数callback(),若前面为假，后面不会执行
                }
                window.scroll(0, window.pageYOfset + step); //offset只能获取，不能赋值;style能赋值
            }, 20)
        }