7. PC端网页特效

深藏阁楼爱情的钟 2022-10-05 15:00 332阅读 0赞

**声明**：本人前端学习笔记的所有内容均为b站上pink老师课程的学习笔记，如果想详细了解的可以搜索以下网址：

1.  H5C3+移动布局：[ 黑马程序员pink老师前端入门视频教程 HTML5+CSS3+移动端布局-flex布局rem布局响应式布局摹客蓝湖使用-简单有趣好玩][_pink_ HTML5_CSS3_-flex_rem_-]
2.  JavaScript系列 ：[JavaScript基础语法-dom/bom-es6-jQuery-数据可视化echarts-包含笔记源码作业黑马程序员pink老师前端入门视频教程（持续更新）][JavaScript_-dom_bom-es6-jQuery-_echarts-_pink]

### 文章目录 ###

*   *  1. 元素偏移量offset 系列
     *   *  1.1 offset 概述
         *  1.2 offset 与style 区别
     *  2. 元素可视区client 系列
     *  3. 元素滚动scroll 系列
     *   *  3.1 元素scroll 系列属性
         *  3.2 页面被卷去的头部
         *  3.3 页面被卷去的头部兼容性解决方案
     *  4. 三大系列总结
     *  5. mouseenter 和mouseover的区别
     *  6. 动画函数封装
     *   *  6.1 动画实现原理
         *  4.2 动画函数简单封装
         *  4.3 动画函数给不同元素记录不同定时器
         *  4.4 缓动效果原理
         *  4.5 动画函数多个目标值之间移动
         *  4.6 动画函数添加回调函数
         *  4.7 动画函数封装到单独JS文件里面

--------------------

## 1. 元素偏移量offset 系列 ##

### 1.1 offset 概述 ###

offset 翻译过来就是偏移量，我们使用offset 系列相关属性可以**动态**的得到该元素的位置（偏移）、大小等。

*  获得元素距离带有定位父元素的位置
 *  获得元素自身的大小（宽度高度）

**注意**：返回的数值都不带单位

offset 系列常用属性：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODc0MzE5_size_16_color_FFFFFF_t_70]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODc0MzE5_size_16_color_FFFFFF_t_70 1][]

<body>
        <div class="father">
            <div class="son"></div>
        </div>
        <div class="w"></div>
        <script>
            // offset 系列
            var father = document.querySelector('.father');
            var son = document.querySelector('.son');
            // 1.可以得到元素的偏移 位置 返回的不带单位的数值  
            console.log(father.offsetTop);
            console.log(father.offsetLeft);
            // 它以带有定位的父亲为准  如果没有父亲或者父亲没有定位 则以 body 为准
            console.log(son.offsetLeft);
            
            var w = document.querySelector('.w');
            // 2.可以得到元素的大小 宽度和高度 是包含padding + border + width 
            console.log(w.offsetWidth);
            console.log(w.offsetHeight);
            
            // 3. 返回带有定位的父亲 否则返回的是body
            console.log(son.offsetParent); // 返回带有定位的父亲 否则返回的是body
            console.log(son.parentNode); // 返回父亲 是最近一级的父亲 亲爸爸 不管父亲有没有定位
        </script>
    </body>

### 1.2 offset 与style 区别 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODc0MzE5_size_16_color_FFFFFF_t_70 2]

<body>
        <div class="box" style="width: 200px;"></div>
        <script>
            // offset与style的区别
            var box = document.querySelector('.box');
            console.log(box.offsetWidth);
            console.log(box.style.width); //style只能得到行内样式表的样式值
            // box.offsetWidth = '300px'; //offsetWidth是只读属性，只能获取不能赋值
            box.style.width = '300px';    //style.width可以赋值
        </script>
    </body>

**案例：获取鼠标在盒子内的坐标**

<body>
        <div class="box"></div>
        <script>
            // 我们在盒子内点击， 想要得到鼠标距离盒子左右的距离。
            // 首先得到鼠标在页面中的坐标（e.pageX, e.pageY）
            // 其次得到盒子在页面中的距离(box.offsetLeft, box.offsetTop)
            // 用鼠标距离页面的坐标减去盒子在页面中的距离， 得到 鼠标在盒子内的坐标
            var box = document.querySelector('.box');
            //如果想要移动一下鼠标，就要获取最新的坐标，使用鼠标移动事件mousemove
            box.addEventListener('mousemove', function(e) {
         
                var x = e.pageX - this.offsetLeft;
                var y = e.pageY - this.offsetTop;
                this.innerHTML = 'x坐标是' + x + ' y坐标是' + y;
            })
        </script>
    </body>

**案例：模态框拖拽**

**任务需求**：弹出框，我们也称为模态框。

1.  点击弹出层，会弹出模态框，并且显示灰色半透明的遮挡层。
2.  点击关闭按钮，可以关闭模态框，并且同时关闭灰色半透明遮挡层。
3.  鼠标放到模态框最上面一行，可以按住鼠标拖拽模态框在页面中移动。
4.  鼠标松开，可以停止拖动模态框移动。

**案例分析**

①点击弹出层，模态框和遮挡层就会显示出来display:block;  
②点击关闭按钮，模态框和遮挡层就会隐藏起来display:none;  
③鼠标按下触发的事件源是最上面一行，就是id 为title，触发事件是鼠标按下mousedown, 之后鼠标移动mousemove，最后松开鼠标mouseup  
④在页面中拖拽的原理：鼠标移动过程中，获得最新的值赋值给模态框的 left 和 top 值，这样模态框可以跟着鼠标走了  
⑤对于模态框的更新坐标的计算：首先鼠标按下，我们可以得到鼠标在页面中的坐标，根据偏移量可以求出按下鼠标时模态框的坐标，两者相减得到鼠标在盒子中的坐标(x, y)，由于在移动过程中，鼠标在盒子中的坐标不变，因此鼠标在页面中的坐标减去鼠标在盒子内的坐标，就是模态框真正的位置（**注意移动事件写到按下事件里面。**）  
⑥鼠标松开，就停止拖拽，就是可以让鼠标移动事件解除

<body>
        <div class="login-header"><a id="link" href="javascript:;">点击，弹出登录框</a></div>
        <div id="login" class="login">
            <div id="title" class="login-title">登录会员
                <span><a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a></span>
            </div>
            <div class="login-input-content">
                <div class="login-input">
                    <label>用户名：</label>
                    <input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input">
                </div>
                <div class="login-input">
                    <label>登录密码：</label>
                    <input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input">
                </div>
            </div>
            <div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登录会员</a></div>
        </div>
        
        <div id="bg" class="login-bg"></div>
        <script>
            // 1. 获取元素
            var login = document.querySelector('.login');
            var mask = document.querySelector('.login-bg');
            var link = document.querySelector('#link');
            var closeBtn = document.querySelector('#closeBtn');
            var title = document.querySelector('#title');
            // 2. 点击弹出层这个链接 link  让mask 和login 显示出来
            link.addEventListener('click', function () {
         
                mask.style.display = 'block';
                login.style.display = 'block';
            })
            // 3. 点击 closeBtn 就隐藏 mask 和 login 
            closeBtn.addEventListener('click', function () {
         
                mask.style.display = 'none';
                login.style.display = 'none';
            })
            // 4. 开始拖拽
            // (1) 当我们鼠标按下， 就获得鼠标在盒子内的坐标
            title.addEventListener('mousedown', function (e) {
         
                var x = e.pageX - login.offsetLeft;
                var y = e.pageY - login.offsetTop;
                // (2) 鼠标移动的时候，把鼠标在页面中的坐标，
                //减去 鼠标在盒子内的坐标就是模态框的left和top值
                document.addEventListener('mousemove', move)
    
                function move(e) {
         
                    login.style.left = e.pageX - x + 'px'; //一定要记得加上单位
                    login.style.top = e.pageY - y + 'px';
                }
                // (3) 鼠标弹起，就让鼠标移动事件移除
                document.addEventListener('mouseup', function () {
         
                    document.removeEventListener('mousemove', move);
                })
            })
        </script>
    </body>

## 2. 元素可视区client 系列 ##

client 翻译过来就是客户端，我们使用client 系列的相关属性来**获取元素可视区的相关信息**。通过client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。（client 宽度和高度 和 offsetWidth 最大的区别就是 不包含边框）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODc0MzE5_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODc0MzE5_size_16_color_FFFFFF_t_70 4]

**案例：淘宝flexible.js 源码分析**：

**立即执行函数**：(function() \{\})() 或者 (function()\{\}())  
主要作用：创建一个独立的作用域。避免了命名冲突问题

**load 与 pageshow的特点和区别**

下面三种情况都会刷新页面都会触发load 事件。

1.  a标签的超链接
2.  F5或者刷新按钮（强制刷新）
3.  前进后退按钮

但是火狐中，有个特点，有个“往返缓存”，这个缓存中不仅保存着页面数据，还保存了DOM和 JavaScript的状态；实际上是将整个页面都保存在了内存里。  
所以此时后退按钮不能刷新页面。此时可以使用pageshow事件来触发。

这个事件在页面显示时触发，无论页面是否来自缓存。在重新加载页面中，pageshow会在load事件触发后触发；根据事件对象中的**persisted**来判断是否是缓存中的页面触发的pageshow事件，注意这个事件**给window添加**。

(function flexible(window, document) {
        
        // 获取的html 的根元素
        var docEl = document.documentElement
            // dpr 物理像素比,pc端是1，移动端是2
        var dpr = window.devicePixelRatio || 1
    
        // adjust body font size  设置我们body 的字体大小
        function setBodyFontSize() {
        
            // 如果页面中有body 这个元素 就设置body的字体大小
            if (document.body) {
        
                document.body.style.fontSize = (12 * dpr) + 'px'
            } else {
        
           // 如果页面中没有body 这个元素，则等着 我们页面主要的DOM元素加载完毕再去设置body的字体大小
                document.addEventListener('DOMContentLoaded', setBodyFontSize)
            }
        }
        setBodyFontSize();
    
        // set 1rem = viewWidth / 10    设置我们html 元素的文字大小
        function setRemUnit() {
        
            var rem = docEl.clientWidth / 10
            docEl.style.fontSize = rem + 'px'
        }
        setRemUnit()
    
        // reset rem unit on page resize  当我们页面尺寸大小发生变化的时候，要重新设置下rem 的大小
        window.addEventListener('resize', setRemUnit)
            // pageshow 是我们重新加载页面触发的事件
        window.addEventListener('pageshow', function(e) {
        
            // e.persisted 返回的是true 就是说如果这个页面是从缓存取过来的页面，也需要从新计算一下rem 的大小
            if (e.persisted) {
        
                setRemUnit()
            }
        })
    
        // detect 0.5px supports  有些移动端的浏览器不支持0.5像素的写法
        if (dpr >= 2) {
        
            var fakeBody = document.createElement('body')
            var testElement = document.createElement('div')
            testElement.style.border = '.5px solid transparent'
            fakeBody.appendChild(testElement)
            docEl.appendChild(fakeBody)
            if (testElement.offsetHeight === 1) {
        
                docEl.classList.add('hairlines')
            }
            docEl.removeChild(fakeBody)
        }
    }(window, document))

## 3. 元素滚动scroll 系列 ##

### 3.1 元素scroll 系列属性 ###

scroll 翻译过来就是滚动的，我们使用scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODc0MzE5_size_16_color_FFFFFF_t_70 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODc0MzE5_size_16_color_FFFFFF_t_70 6]

### 3.2 页面被卷去的头部 ###

如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部。滚动条在滚动时会触发**onscroll 事件**。

<body>
        <div>
            我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内		容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 		  我是内容 我是内容 我是内容
        </div>
        <script>
            // scroll 系列
            var div = document.querySelector('div');
            console.log(div.scrollHeight);
            console.log(div.clientHeight);
            // scroll滚动事件当我们滚动条发生变化会触发的事件
            div.addEventListener('scroll', function () {
         
                console.log(div.scrollTop);
    
            })
        </script>
    </body>

**案例：仿淘宝固定右侧侧边栏**

1.原先侧边栏是绝对定位  
2. 当页面滚动到一定位置，侧边栏改为固定定位  
3. 页面继续滚动，会让返回顶部显示出来

**案例分析**：

①需要用到页面滚动事件scroll 因为是页面滚动，所以事件源是document  
②滚动到某个位置，就是判断页面被卷去的上部值。  
③页面被卷去的头部：**可以通过window.pageYOffset 获得，如果是被卷去的左侧window.pageXOffset**  
④注意，元素被卷去的头部是element.scrollTop , 如果是页面被卷去的头部则是window.pageYOffset  
⑤其实这个值可以通过盒子的offsetTop 可以得到，如果大于等于这个值，就可以让盒子固定定位了

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5R3C5XKc-1623249564711)(C:\\Users\\lp\\AppData\\Roaming\\Typora\\typora-user-images\\image-20210609090603672.png)\]][img-5R3C5XKc-1623249564711_C_Users_lp_AppData_Roaming_Typora_typora-user-images_image-20210609090603672.png]

### 3.3 页面被卷去的头部兼容性解决方案 ###

需要注意的是，页面被卷去的头部，有兼容性问题，因此被卷去的头部通常有如下几种写法：

1.  声明了DTD，使用document.documentElement.scrollTop
2.  未声明DTD，使用document.body.scrollTop
3.  新方法window.pageYOffset 和window.pageXOffset，IE9 开始支持

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

## 4. 三大系列总结 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODc0MzE5_size_16_color_FFFFFF_t_70 7]

他们主要用法：

1.  offset系列经常用于获得元素位置offsetLeft offsetTop
2.  client 经常用于获取元素大小clientWidth clientHeight
3.  scroll 经常用于获取滚动距离scrollTop scrollLeft
4.  注意页面滚动的距离通过window.pageXOffset 获得

## 5. mouseenter 和mouseover的区别 ##

当鼠标移动到元素上时就会触发**mouseenter** 事件，类似**mouseover**，它们两者之间的差别是

*  mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。
 *  mouseenter 只会经过自身盒子触发

之所以这样，就是因为mouseenter不会冒泡

跟mouseenter搭配鼠标离开**mouseleave** 同样不会冒泡

<body>
        <div class="father">
            <div class="son"></div>
        </div>
        <script>
            var father = document.querySelector('.father');
            var son = document.querySelector('.son');
            father.addEventListener('mouseenter', function() {
         
                console.log(11);  //经过子盒子时不会发送11
            })
        </script>
    </body>

## 6. 动画函数封装 ##

### 6.1 动画实现原理 ###

**核心原理**：通过定时器setInterval() 不断移动盒子位置。

实现步骤：

1.  获得盒子当前位置（获取位置用div.offsetLeft）
2.  让盒子在当前位置加上1个移动距离（更改位置用div.style.left）
3.  利用定时器不断重复这个操作
4.  加一个结束定时器的条件
5.  **注意此元素需要添加定位，才能使用element.style.left**

<body>
        <div></div>
        <script>
            var div = document.querySelector('div');
            var timer = setInterval(function() {
         
                if (div.offsetLeft >= 400) {
         
                    // 停止动画 本质是停止定时器
                    clearInterval(timer);
                }
                div.style.left = div.offsetLeft + 1 + 'px';
            }, 30);
        </script>
    </body>

### 4.2 动画函数简单封装 ###

注意函数需要传递2个参数，**动画对象**和**移动到的距离**。

<div></div>
    <span>夏雨荷</span>
    <script>
        // 简单动画函数封装obj目标对象 target 目标位置
        function animate(obj, target) {
         
            var timer = setInterval(function() {
         
                if (obj.offsetLeft >= target) {
         
                    // 停止动画 本质是停止定时器
                    clearInterval(timer);
                }
                obj.style.left = obj.offsetLeft + 1 + 'px';
    
            }, 30);
        }
    
        var div = document.querySelector('div');
        var span = document.querySelector('span');
        // 调用函数
        animate(div, 300);
        animate(span, 200);
    </script>

一定要注意给相应元素加定位！！

### 4.3 动画函数给不同元素记录不同定时器 ###

如果多个元素都使用这个动画函数，每次都要var 声明定时器，比较消耗内存空间。我们可以给不同的元素使用不同的定时器（自己专门用自己的定时器）。

**核心原理：利用 JS 是一门动态语言，可以很方便的给当前对象添加属性。**

<body>
        <button>点击夏雨荷才走</button>
        <div></div>
        <span>夏雨荷</span>
        <script>
            // 简单动画函数封装obj目标对象 target 目标位置
            // 给不同的元素指定了不同的定时器
            function animate(obj, target) {
         
                // 当我们不断的点击按钮，这个元素的速度会越来越快，因为开启了太多的定时器
                // 解决方案就是 让我们元素只有一个定时器执行
                // 先清除以前的定时器，只保留当前的一个定时器执行
                clearInterval(obj.timer);
                
                obj.timer = setInterval(function () {
         
                    if (obj.offsetLeft >= target) {
         
                        // 停止动画 本质是停止定时器
                        clearInterval(obj.timer);
                    }
                    obj.style.left = obj.offsetLeft + 1 + 'px';
    
                }, 30);
            }
    
            var div = document.querySelector('div');
            var span = document.querySelector('span');
            var btn = document.querySelector('button');
            // 调用函数
            animate(div, 300);
            btn.addEventListener('click', function () {
         
                animate(span, 200);
            })
        </script>
    </body>

### 4.4 缓动效果原理 ###

缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来

思路：

1.  让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。
2.  **核心算法：(目标值- 现在的位置) / 10 做为每次移动的距离步长**
3.  停止的条件是：让当前盒子位置等于目标位置就停止定时器
4.  注意步长值需要取整

还是在之前的代码基础上进行修改：

<body>
        <button>点击夏雨荷才走</button>
        <span>夏雨荷</span>
        <script>
            function animate(obj, target) {
         
                // 先清除以前的定时器，只保留当前的一个定时器执行
                clearInterval(obj.timer);
                obj.timer = setInterval(function() {
         
                    // 步长值写到定时器的里面（这里要注意！）
                    var step = (target - obj.offsetLeft) / 10;
                    if (obj.offsetLeft == target) {
         
                        // 停止动画 本质是停止定时器
                        clearInterval(obj.timer);
                    }
                    // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
                    obj.style.left = obj.offsetLeft + step + 'px';
    
                }, 15);
            }
            var span = document.querySelector('span');
            var btn = document.querySelector('button');
    
            btn.addEventListener('click', function() {
         
                    // 调用函数
                    animate(span, 500);
                })
                // 匀速动画 就是 盒子是当前的位置 +  固定的值 10 
                // 缓动动画就是  盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 10）
        </script>
    </body>

### 4.5 动画函数多个目标值之间移动 ###

可以让动画函数从800 移动到500。当我们点击按钮的时候，判断步长是正值还是负值

1.  如果是正值，则步长往大了取整（ceil）
2.  如果是负值，则步长向小了取整（floor）

### 4.6 动画函数添加回调函数 ###

回调函数原理：函数可以作为一个参数。将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数，这个过程就叫做回调。

回调函数写的位置：定时器结束的位置。

### 4.7 动画函数封装到单独JS文件里面 ###

因为以后经常使用这个动画函数，可以单独封装到一个JS文件里面，使用的时候引用这个JS文件即可。

1.  单独新建一个JS文件。
2.  HTML文件引入JS 文件。

**引用animate.js案例制作：**

![在这里插入图片描述][20210609224227296.png]

<body>
        <div class="sliderbar">
            <span>←</span>
            <div class="con">问题反馈</div>
        </div>
    
        <script>
            // 1. 获取元素
            var sliderbar = document.querySelector('.sliderbar');
            var con = document.querySelector('.con');
            
            // 当我们鼠标经过 sliderbar 就会让 con这个盒子滑动到左侧
            // 当我们鼠标离开 sliderbar 就会让 con这个盒子滑动到右侧
            sliderbar.addEventListener('mouseenter', function() {
         
                // animate(obj, target, callback);
                animate(con, -160, function() {
         
                    // 当我们动画执行完毕，就把 ← 改为 →
                    sliderbar.children[0].innerHTML = '→';
                });
            })
            sliderbar.addEventListener('mouseleave', function() {
         
                // animate(obj, target, callback);
                animate(con, 0, function() {
         
                    sliderbar.children[0].innerHTML = '←';
                });
    
            })
        </script>
    </body>

**案例：返回顶部**

滚动窗口至文档中的特定位置。window.scroll(x, y)

**注意，里面的x和y 不跟单位，直接写数字**

①带有动画的返回顶部  
②此时可以继续使用我们封装的动画函数  
③只需要把所有的 left 相关的值改为跟页面垂直滚动距离相关就可以了  
④页面滚动了多少，可以通过window.pageYOffset 得到  
⑤最后是页面滚动，使用window.scroll(x,y)

<body>
        <div class="slider-bar">
            <span class="goBack">返回顶部</span>
        </div>
        <div class="header w">头部区域</div>
        <div class="banner w">banner区域</div>
        <div class="main w">主体部分</div>
        <script>
            //1. 获取元素
            var sliderbar = document.querySelector('.slider-bar');
            var banner = document.querySelector('.banner');
            // banner.offestTop 就是被卷去头部的大小 一定要写到滚动的外面
            var bannerTop = banner.offsetTop
                // 当我们侧边栏固定定位之后应该变化的数值
            var sliderbarTop = sliderbar.offsetTop - bannerTop;
            // 获取main 主体元素
            var main = document.querySelector('.main');
            var goBack = document.querySelector('.goBack');
            var mainTop = main.offsetTop;
            // 2. 页面滚动事件 scroll
            document.addEventListener('scroll', function() {
         
                    // window.pageYOffset 页面被卷去的头部
                    // 3 .当我们页面被卷去的头部大于等于了 172 此时 侧边栏就要改为固定定位
                    if (window.pageYOffset >= bannerTop) {
         
                        sliderbar.style.position = 'fixed';
                        sliderbar.style.top = sliderbarTop + 'px';
                    } else {
         
                        sliderbar.style.position = 'absolute';
                        sliderbar.style.top = '300px';
                    }
                    // 4. 当我们页面滚动到main盒子，就显示 goback模块
                    if (window.pageYOffset >= mainTop) {
         
                        goBack.style.display = 'block';
                    } else {
         
                        goBack.style.display = 'none';
                    }
                })
                // 3. 当我们点击了返回顶部模块，就让窗口滚动的页面的最上方
            goBack.addEventListener('click', function() {
         
                // 里面的x和y 不跟单位的 直接写数字即可
                // window.scroll(0, 0);
                // 因为是窗口滚动 所以对象是window
                animate(window, 0);
            });
            // 动画函数（只需要把所有的left 相关的值改为跟页面垂直滚动距离相关就可以了）
            function animate(obj, target, 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); //注意这里的改变
                }, 15);
            }
        </script>
    </body>

[_pink_ HTML5_CSS3_-flex_rem_-]: https://www.bilibili.com/video/BV14J4114768?spm_id_from=333.788.b_636f6d6d656e74.6
[JavaScript_-dom_bom-es6-jQuery-_echarts-_pink]: https://www.bilibili.com/video/BV1Sy4y1C7ha?spm_id_from=333.788.b_636f6d6d656e74.7
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODc0MzE5_size_16_color_FFFFFF_t_70]: /images/20221005/43bacee36f2542d5aaf944157d238bc5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODc0MzE5_size_16_color_FFFFFF_t_70 1]: /images/20221005/4cc970200c8e46eaa88c77352965dd61.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODc0MzE5_size_16_color_FFFFFF_t_70 2]: /images/20221005/37b682ef93ea40b4837700b14c2be05c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODc0MzE5_size_16_color_FFFFFF_t_70 3]: /images/20221005/bbc8ff2f0f324983b78e46a94eefb184.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODc0MzE5_size_16_color_FFFFFF_t_70 4]: /images/20221005/e34d83e9435948319e598a1351519ee5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODc0MzE5_size_16_color_FFFFFF_t_70 5]: /images/20221005/3cca3bfbd976441cbee7d1f5502d586f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODc0MzE5_size_16_color_FFFFFF_t_70 6]: /images/20221005/7c267e44cadf468984eb73e23db808ef.png
[img-5R3C5XKc-1623249564711_C_Users_lp_AppData_Roaming_Typora_typora-user-images_image-20210609090603672.png]: /images/20221005/f7a161147f4f4abf8d126719fe66b242.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODc0MzE5_size_16_color_FFFFFF_t_70 7]: /images/20221005/f8f2685c5c03471aa87ca091e61c19b4.png
[20210609224227296.png]: /images/20221005/9a23d60fb2a84adf82e6e089088736b9.png