day4(浏览器中的位置)

总结一下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这个属性
注意如果事件绑定在

上，鼠标移入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）

相关兼容性及整理戳这里