总结一下jquery获取元素位置方法：
一般情况，最简单的就是到达某一个元素时，元素出现：
$(window).scrollTop+$(window)[0].innerHeight
关于窗口大小（即就是可视区域大小）
其中jquery的 $(window).innerHeight()==$(window)[0].innerHeight 其实相当于jquer把这个原生js中的属性封装成了一个函数 window.innnerHeight也和上面两个式子相等.
还有一个：document.documentElement.clientHeight=window.innnerHeight
so 四个都相等啦！
关于滚动条：
$(window).scrollTop()=window.scrollY=document.body.scrollTop
页面总高度
document.body.clientHeight
某个元素距离顶端的距离
document.getElementById("product-active").offsetTop(整数)
只能说这两个近似相等
$("#product-active").offset().top(浮点数)
鼠标的相对距离
不存在e.target.offsetX这个属性，只有e.target.offsetLeft这个属性
注意如果事件绑定在<div><h1></h1></div>上，鼠标移入h1会触发
此时得到的坐标应该为 e.target.offsetLeft+e.offsetX就是相当于相对div的距离。
另外clientX得到的是相对于可视窗口00点的坐标，而pageX相对于html的00坐标
注意理解！
// 变量的解构 其实就相当于给x赋值，因为e里面有e.offsetX这个属性
let { offsetX: x, offsetY: y } = e;
getBoundingClientRect
getBoundingClientRect() 会得到四个值，分别是width,height,top,left。
注意得到的相对于视窗的top和left 如果相对于html记得加上滚动条的距离（window.scrollY或者document.body.scrollTop）
