网页特效

滚动事件

定义

当页面进行滚动时触发的事件

语法

为整个页面添加滚动事件：

给 window 或 document 添加 scroll 事件

window.addEventListener('scroll', function() {
    console.log('我在滚动');
})

为特定元素添加滚动事件：

直接给特定元素添加 scroll 事件即可

let box = document.querySelector('.box')
   box.addEventListener('scroll', function() {
       console.log('我也在滚动哦');
})

加载事件

定义

加载外部资源（如图片、外联 CSS 和 JavaScript 等）加载完毕时触发的事件

使用场景

有些需要等页面资源全部处理完了再做一些事情
老代码喜欢把 script 写在 head 中，这时候直接找 dom 元素找不到

语法

监听页面所有资源加载完毕，包括图片资源、样式资源等
```
window.addEventListener('load', function() {
     console.log('加载完毕我再弹出');
})
```
注意：

不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定 load 事件
初始的 HTML 文档被完全加载和解析完成，而无需等待样式表、图像等完全加载

window.addEventListener('DOMContentLoaded', function() {
     console.log('我弹出啦');
})

总结

如何为页面添加滚动事件

监听整个页面滚动给 window 或 document 加
为元素添加滚动事件获取该元素添加方法即可
方法为scroll

加载事件的区别

load 事件
- 监听整个页面资源，给 window 加
- 需等待样式表、图像等完全加载
DOMContentLoaded
- 给 document 加,当初始的 HTML 文档被完全加载和解析完成之后触发
- 无需等待样式表、图像等完全加载
- 速度比 load 快一些

元素大小和位置

`scroll` 家族

获取宽高
- scrollWidth
  
  获取元素的内容总宽度（内容+内边距）
- scrollHeight
  
  获取元素的内容总高度（内容+内边距）
注意：
1. 不包含滚动条
2. 不包含边框
3. 返回值不带单位
获取位置
- scrollLeft
获取元素内容往左滚出去看不到的距离，即滚动条往下滚动时上方被卷去文字的长度
- scrollTop
获取元素内容往上滚出去看不到的距离，即滚动条往右滚动时左方被卷去文字的长度

注意：

这两个属性是可以修改的（可以赋值）

检测页面滚动的距离

document.documentElement.scrollTop

window.addEventListener('scroll', function() {
       console.log(document.documentElement.scrollTop);
})

`offset` 家族

获取宽高
- offsetWidth
  
  获取元素的自身宽度（内容+内边距+边框）
- offsetHeight
  
  获取元素的自身高度（内容+内边距+边框）
注意：
1. 不包含滚动条
2. 返回值不带单位
获取位置
- offsetLeft
  
  获取元素距离自己定位父级元素的左距离
- offsetTop
  
  获取元素距离自己定位父级元素的上距离
判断基准
1. 以最近一个带有定位的父级
2. 如果都没有则以文档左上角为准
3. 只读属性

`client` 家族

获取宽高
- clientWidth
  
  获取元素的可见部分宽度（内容+内边距）
- clientHeight
  
  获取元素的可见部分高度（内容+内边距）
注意：
1. 不包含滚动条
2. 不包含边框
3. 返回值不带单位
获取位置
- clientLeft
  
  获取左边框宽度
- clientTop
  
  获取上边框宽度

只读属性

窗口尺寸改变的时候触发事件

window.addEventListener('resize', function() {
               document.body.style.backgroundColor = 'red'
               if (document.documentElement.clientWidth > 720) {
                   document.body.style.backgroundColor = 'yellow'
               }
               if (document.documentElement.clientWidth > 980) {
                   document.body.style.backgroundColor = 'blue'
               }
               if (document.documentElement.clientWidth > 1200) {
                   document.body.style.backgroundColor = 'purple'
               }
})

总结

offset 家族
1. 获取元素自身大小：包括自身设置的宽高、 padding 、 border
2. 获取元素距离定位父级的左和上距离只读属性
client 家族
1. 获取元素可见区域的大小
2. 获取元素左、上边框距离
3. 只读属性
scroll 家族
1. 获取元素内容的总大小
2. 获取元素向左向上滚出去看不见的距离
3. 可读写属性

总结

网页特效.png

综合案例

仿京东固定导航栏

整体效果如下图所示

无效果.png

有效果.png

默认页面顶部导航栏不显示，当页面滑动到秒杀模块上面后显示固定导航栏。

看完需求，开始构思步骤。

获取秒杀模块与顶部导航栏的事件源
由于是下滑到秒杀模块，因此要为整个页面设置滚动事件监听，为页面设置滚动事件的语法为 window.addEventListeren('scroll',function(){}) 。设置事件后，开始获取其他需要的值
1. 要滑动到秒杀模块再弹出顶部，就要获取秒杀模块到顶部的距离， scrollTop 获取的是上方被卷去的距离， clientTop 用于获取上边框距离，因此只剩下 offsetTop 了。
2. 获取到秒杀模块的 offsetTop 值后，进行判断，如果页面被卷去的头部距离大于该值，则显示顶部。获取页面被卷去的上方的距离代码为 document.documentElement.scrollTop 。 HTML 是唯一元素，写法为 document.documentElement 。
3. 符合判断条件则让顶部导航栏的 top 值为0，反之为 -80px 。

window.addEventListener('load', function() {
    // 获取导航栏和秒杀模块的事件源
    let sk = document.querySelector('.sk')
    let header = document.querySelector('.header')

    // 获取秒杀模块距离页面顶部的距离
    let skOffset = sk.offsetTop

    // 为页面添加滚动事件绑定
    window.addEventListener('scroll', function() {
        console.log(skOffset);
        // 如果页面被卷去的距离大于等于秒杀模块到顶部的距离，则说明已经滑到秒杀模块这里，显示顶部导航栏
        if (document.documentElement.scrollTop >= skOffset) {
            header.style.top = 0
        } else {
            header.style.top = '-80px'
        }
    })
})

Web APIs 知识总结【网页特效】