offset 、 client 和 scroll - PC端网页特效
1.元素偏移量 offset 系列
1.1 offset 就是偏移量，使用 offset 系列相关属性可以 动态 得到该元素的位置（偏移）、大小等。
注意：
1.获得元素距离带有定位父元素的位置
2.获得元素自身的大小（宽度和高度）
3.返回的数值都不带单位
1.2 offset 系列常用属性（元素以带有定位的父亲为准，如果没有父亲，或者父亲没有定位，则以 body 为准）
element.offsetTop 返回元素相对带有定位父元素上方的偏移
element.offsetLeft 返回元素相对带有定位父元素左边框的偏移
element.ofsetParent 返回作为该元素带有定位的父级元素 如果父级都没有定位则返回 body
element.offsetWidth 返回自身包括 padding、边框、内容区的宽度，返回数值不带单位
element.offsetHeight 返回自身包括 padding、边框、内容区的高度，返回数值不带单位
区别：offsetParent 返回带有定位的父亲，否则返回body，
parentNode 返回父亲 是最近一级的父亲 亲爸爸 不管父亲有没有定位
1.3 offset 和 style 的区别
offset 可以得到任意样式表中的样式值，style 只能得到行内样式表中的样式值
offset 系列获得的数值是没有单位的，style.width 获得的是带有单位的字符串
offsetWidth 包含 padding + border + width，style.width 获得不包含 padding + border 的值
offsetWidth 等属性是只读属性，只能获取不能赋值，style.width 是可读写属性，可以获取也可以赋值
想要获取元素大小位置，使用 offset 更合适，想要给元素更改值，需要用 style 改变
2.元素可视区 client 系列
client 翻译过来就是客户端，通过 client 系列的相关属性可以动态获得该元素的边框大小、元素大小等。
element.clientTop 返回元素上边框的大小
element.clientLeft 返回元素左边框的大小
element.clientHeight 返回自身包括 padding、内容区的高度，不含边框，返回数值不带单位
element.clientWidth 返回自身包括 padding 、内容区的宽度，不含边框，返回数值不带单位
client 宽度 和 offsetWidth 最大的区别就是 不包含边框
3.元素滚动 scroll 系列
scroll 翻译过来就是滚动的，使用 scroll 系列的相关属性，可以动态的得到该元素的大小，滚动距离等。
element.scrollTop 返回被卷去的上侧距离，返回数值不带单位
element.scrollLeft 返回被卷去的左侧距离，返回数值不带单位
element.scrollWidth 返回自身实际的宽度（内容区域）不含边框，返回数值不带单位
element.scrollHeight 返回自身实际的高度（内容区域）不含边框，返回数值不带单位
onscroll 滚动事件 当滚动条发生变化会触发的事件
注意：
页面被卷去的头部，通过 window.pageYOffset 获得，如果是被卷去的左侧 window.pageXOffset
元素被卷去头部是 element.scrollTop ，如果是元素被卷去左侧 element.scrollLeft
兼容性问题：
需要注意的是，页面被卷去的头部，有兼容性问题，因此被卷去的头部通常有如下几种写法：
1.声明DTD（<!DOCTYPE html>）使用 document.documentElement.scrollTop
2.未声明DTD，使用document.body.scrollTop
3.新方法 window.pageYOffset 和 window.pageXOffset，IE9开始支持
function getScroll(){
return {
top : window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
left : window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0
};
}
使用时， getScroll().left
总结：
1.offset 系列经常用于获得元素位置 offsetTop offsetLeft
2.client 系列经常用于获取元素大小 clientWidth clientHeight
3.scroll 系列经常用于获取滚动距离 scrollTop scrollLeft
4.注意页面滚动的距离通过 window.pageYOffset 获得
