offset、client、scroll三个系列的相同与不同

1. offset

用处：
1)、获得元素距离带有定位父元素的位置
2)、获得自身大小包括宽高边框内边距
3)、返回值不带单位
4)、不能设置元素的样式
offset家族的成员：
offsetParent：返回该元素带定位的最近父元素，如果父元素都没有定位，那就返回body
offsetTop：返回元素相对于带定位的父元素上边框的距离，返回值不带单位
offsetLeft：返回元素相对于带定位的父元素左边框的距离，返回值不带单位
offsetWidth：返回自身的宽度，width+border+padding，返回值不带单位
offsetHeight：返回自身的高度，Height+border+padding，返回值不带单位

与style的区别：

offset	style
offset 可以得到任意样式表中的样式值	只能得到行内样式表中的样式值
offset 系列获得的数值是没有单位的	style.width 获得的是带有单位的字符串
offsetWidth 包含padding+border+width	style.width 获得不包含padding和border 的值
offsetWidth 等属性是只读属性，只能获取不能赋值	style.width 是可读写属性，可以获取也可以赋值
所以，我们想要获取元素大小位置，用offset更合适	所以，我们想要给元素更改值，则需要用style改变

2. client系列

   通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等
   clientTop：返回元素上边框大小
   clientLeft：返回元素左边框大小
   clientWidth：返回自身宽度（width+padding），不包含边框，没有单位
   clientHeight：返回自身高度（height+padding），不包含边框，没有单位

3.scroll系列
使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等
scrollTop 返回DOM被卷到上面的距离，返回值没有单位
scrollLeft 返回DOM被卷到左面面的距离，返回值没有单位
scrollWidth ：返回自身宽度（width+padding），不含边框，没有单位
scrollHeight ：返回自身高度(height+padding)，不含边框，没有单位

页面头部被卷起的解决兼容方案
页面被卷起头部的解决方案
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 / getScroll().top;