1.案例（页面滚动显示隐藏侧边栏）
通过操作xtx-elevator(这次案例主要针对于elevator)
1.1 页面尺寸事件
1.2 通过cilentWidth和clientHeight获取页面尺寸
包含的只有padding往里的区域（见图）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
window.addEventListener('resize', function () {
//获取body的宽度
console.log(document.body.clientWidth);
console.log(document.body.clientHeight);
})
</script>
</body>
</html>
结果：因为body中无内容，所以输出的height=0
1.3 resize和clientWigth（clientHight）的结合使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const setFontSize = function () {
const html = document.documentElement
const cilentWidth = html.clientWidth
html.style.fontSize = cilentWidth / 10 + 'px'
}
setFontSize()
window.addEventListener('resize', setFontSize)
console.log(1)
</script>
</body>
</html>
2.元素尺寸和位置
注意：
offsetwidth和offsetHeight与父级定位无关（左与上）
offsetLeft和offsetTop与父级定位有关（右与下）
2.1若父元素father没有定位，则son会根据浏览器取值
2.2若父元素father有定位，则son会根据父级元素为准
2.3总结：
3.案例
3.1案例（吸附顶部案例）
当下滑到一定像素时，顶部的导航栏就会消失； 而让到一定元素后，顶部仍然有导航栏吸附的效果就叫做“吸顶”
3.2案例
事件为a , 所以给a的父级（‘tabs-list’绑定事件）
3.3案例
找到小盒子的类名（small）
