getBoundingClientRect().top与offsetTop的区别

getBoundingClientRect（）:指元素(宽高必须设置具体数值)距离可视区域顶部的距离

offsetTop:返回当前元素相对于 offsetParent（position为非static且距离自己最近的祖先元素） 节点顶部边界的偏移像素值。
且这个距离不随滚动条滚动变化，也就是说这个距离开始是多少就是多少，是个恒定值（包括滚动条卷起的部分）

总结！！
当监听的是window的滚动条时，元素的getBoundingClientRect().top会原来越小，而offsetTop一直不变

实例：获取元素距离视窗顶部的可变距离
楼层导航，懒加载，返回顶部按钮等等，只要涉及scroll事件，都无法避免的要去计算某个元素距离视窗顶部的距离
1、监听window的滚动条

window.onscroll = function () {
    可变距离 = document.querySelector('元素').getBoundingClientRect().top
};

2、可以获取元素的offsrtTop减去滚动条距离（前提是得保证元素的offsetParent为html元素或者body）：

var offsetTop = document.querySelector('元素').offsetTop;
window.onscroll = function () {
    可变距离 = offsetTop - document.documentElement.scrollTop;
};