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)
        }

上一篇:数字证书文件cer和pfx的区别


下一篇:『NLP打卡营』实践课5:文本情感分析