Top值
业务开发中经常会用到元素或者浏览器窗口的各种top值，最近开发组件的过程中也遇到各种问题，因此决定好好总结一下。
常见的top值
scrollTop
Element.scrollTop
属性可以获取或设置一个元素的内容垂直滚动的像素数。
一个元素的 scrollTop值是这个元素的顶部到它的最顶部可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0。
// 获得滚动的像素数
var intElemScrollTop = someElement.scrollTop;
// 运行此代码后， intElemScrollTop 是一个整数，即element的内容向上滚动的像素数。
// 设置滚动的距离
element.scrollTop = intValue;
scrollTop 可以被设置为任何整数值，同时注意：
- 如果一个元素不能被滚动（例如，它没有溢出，或者这个元素有一个"non-scrollable"属性）， scrollTop将被设置为0。
- 设置scrollTop的值小于0，scrollTop 被设为0
- 如果设置了超出这个容器可滚动的值, scrollTop 会被设为最大值.
- window对象或包含有滚动元素的都可以使用scrollTop并设置自己想要的top值
例子：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollTop
获取window对象的scrollTop存在兼容性问题。
解决方案1
if(window.pageYOffset){//这一条滤去了大部分， 只留了IE678
}else if(document.documentElement.scrollTop ){//IE678 的非quirk模式
}else if(document.body.scrolltop){//IE678 的quirk模式
}
解决方案2
scrolltop = (((t = document.documentElement) || (t = document.body.parentNode)) typeof t.scrollTop == ‘number’ ? t : document.body).scrollTop
offsetTop
HTMLElement.offsetTop 为只读属性，它返回当前元素相对于其 offsetParent 元素的顶部的距离。
元素的offsetTop是相对于父级元素的，并不是直接获取到距离页面顶部的距离,需要区分不同情况!!!
offsetParent
向上寻找有定位的祖先节点，依不同情況会有不同结果：
- 往上寻找position不为static的第一个祖先节点。
- 往上寻找第一个TABLE / TH / TD节点。
- 如果沒有找到则为BODY。
- 如果Element本身为fixed，则为null。
- 文件根节点和BODY的offsetParent为null。
clientTop
一个元素顶部边框的宽度（以像素表示）。不包括顶部外边距或内边距。clientTop 是只读的。
获取元素的top-border宽度。
screenTop
screenLeft和screenTop属性返回窗口相对于屏幕的X和Y坐标。
Element.getBoundingClientRect()
常用于确定元素相对于视口的位置。该方法会返回一个DOMRect对象，包含left, top, width, height, bottom, right六个属性。
getClientRects() 返回一个TextRectangle集合，就是TextRectangleList对象。
其他方法
elementFromPoint() 返回给定坐标处所在的元素
scrollIntoView() 让元素滚动到可视区域
