js计算元素距离顶部的高度及元素是否在可视区判断

前言：

　　在业务当中，我们经常要计算元素的大小和元素在页面的位置信息。比如说，在一个滚动区域内，我要知道元素A是在可视区内，还是在隐藏内容区（滚动到外边看不到了）。有时还要进一步知道，元素是全部都显示在可视区，还是有部分在可视区部分在隐藏内容区。有时还要进一步知道，在隐藏内容区的那一部分是占多大的大小。so，来聊聊如何获取元素的大小和位置信息。

 

计算元素距离顶部的高度：偏移量

　　在二维的世界里，可以想象成一个二维坐标系。每一个元素在坐标系内都有两个基本的属性：大小和位置。

　　大小：

　　dom元素在页面的大小有两个属性：offsetWidth 、offsetHeight，

　　offsetHeight：元素在垂直方向上的占用空间大小，以像素计。包括元素的高度、（可见的）水平滚动条的高度、上边框高度和下边框高度。（我的理解：盒模型包括border内的高度总和）

　　offsetWidth： （同理）　　　　　　　　　  　　　 

　　位置：

    offsetParent 是一个只读属性，返回一个指向最近的（closest，指包含层级上的最近）包含该元素的定位元素。如果没有定位的元素，则 offsetParent 为最近的 table, table cell 或根元素

　　offsetTop：元素相对于其 offsetParent 元素的顶部的距离

　　offsetL