原文：获取元素距离页面顶部的距离 - GitHub.

使用 Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置，包含如下属性：

返回值是一个 DOMRect 对象，这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即：是与该元素相关的 CSS 边框集合。
DOMRect 对象包含了一组用于描述边框的只读属性: left、top、right 和 bottom，单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。

  1. top: 元素上边框距离视窗顶部的距离
  2. bottom: 元素下边框距离视窗顶部的距离
  3. left: 元素左边框距离视窗左侧的距离
  4. right: 元素右边框距离视窗左侧的距离

以上四个属性值并不是绝对不变的，它们会随着视窗的滚动而相应的改变，那么元素距离页面顶部的距离就是:

Element.getBoundingClientRect().top + window.scrollY

为解决 window.scrollY 跨浏览器兼容性问题，可使用别名 window.pageYOffset 代替。

IE9 以下对 window.scrollY 和 window.pageYOffset 都不支持，兼容性代码如下：

var supportPageOffset = window.pageXOffset !== undefined;
var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");

var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;

代码来自 MDN Window.scrollY.

以下属性有兼容性问题，具体查看：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect.

  1. width: 元素的宽度
  2. height: 元素的高度
  3. x: 与 left 相等
  4. y: 与 top 相等

Element.getBoundingClientRect() 与 Element.getClientRect() 的区别

它们的主要区别体现在行内元素上，Element.getBoundingClientRect() 返回元素矩形的 DOMRect 对象，而 Element.getClientRect() 返回 DOMRectList （类数组）对象，里面包含每一行的 DOMRect 对象。

对于块级元素，Element.getBoundingClientRect() 同样返回元素矩形的 DOMRect 对象，而 Element.getClientRect() 返回 DOMRectList （类数组）对象内只有一个 DOMRect 对象，就是 Element.getBoundingClientRect() 返回的 DOMRect 对象，它们并不是指向同一个内存地址，虽然它们的值（left、top、right、bottom）相等。