CSS专题之滚动距离

js取得的高度归根到底都是css值，要保证cssom已经应用，否则取到为0

dom对象（document对象）

1. scrollTop:网页被卷去的高（可视部分顶部距离整个文档顶部的距离），可变值。而滚动条正常情况下是属于html(document.documentElement)或者body(document.body)的，

<!--由于DTD存在兼容性问题 同时只会有一个值生效，另一值为0-->
document.documentElement.scrollTop
document.body.scrollTop
<!--兼容性写法-->
var sTop = document.documentElement.scrollTop + document.body.scrollTop;

当然也可以给特定容器设置样式，如下

overflow-y: scroll;//或者auto
-webkit-overflow-scrolling: touch;

这个容器相对于整个页面，没有任何位置变化,接着通过该容器获取scrollTop,即是容器内部的滚动距离。

2. clientHeight:网页可见区域高，固定值。

<!--由于DTD存在兼容性问题-->
document.documentElement.clientHeight//已声明
document.body.clientHeight//未声明

3. scrollHeight:网页正文全文高(包括顶部卷去部分，可视部分，底部隐藏部分)，固定值。

<!--由于DTD存在兼容性问题-->
document.documentElement.scrollHeight//已声明
document.body.scrollHeight//未声明

document.compatMode//可以判断是否声明了DTD 但没必要
<!--兼容性写法-->

4. getBoundingClientRect().top:dom元素相对于视口顶部偏移量,根据盒子模型规定的高度height所在边界来确认边界，可变值。
5. offsetTop:绑定元素上边框距离自己最近且position属性为非static的offsetParent的偏移量。如果没有定位的元素，则 offsetParent 为最近的 table, table cell 或根元素。参照对象可变。在一定情况下会等于jquery对象的offset().top

jquery对象

1. scrollTop():网页被卷去的高，同dom对象scrollTop。类似还有scrollLeft();
2. offset().top:绑定对象上边框距离文档html顶部的偏移量，可变值。
   

dom对象offsetTop与jquery对象offset().top区别比较

<!--区别一：offset().top与offsetTop偏移量参照对象不同，offset().top始终是html，而offsetTop参照的对象是可变的。 -->
<!-- 区别二：offset().top跟着滚动条变化,而offsetTop获取的偏移量不随滚动条滚动变化-->

3. height():盒子高度，仅是height值，跟盒模型有关。

window对象

1. pageYOffset:竖直方向滚动距离（也有scrollBy滚动方法。。。）