總結一下jquery獲取元素位置方法:
一般情況悄雅,最簡單的就是到達某一個元素時,元素出現(xiàn):
$(window).scrollTop+$(window)[0].innerHeight
關于窗口大腥劝肌(即就是可視區(qū)域大斜么)
其中jquery的 $(window).innerHeight()
==$(window)[0].innerHeight
其實相當于jquer把這個原生js中的屬性封裝成了一個函數(shù) window.innnerHeight
也和上面兩個式子相等.
還有一個:document.documentElement.clientHeight
=window.innnerHeight
so 四個都相等啦!
關于滾動條:
$(window).scrollTop()=window.scrollY=document.body.scrollTop
頁面總高度
document.body.clientHeight
某個元素距離頂端的距離
document.getElementById("product-active").offsetTop
(整數(shù))
只能說這兩個近似相等
$("#product-active").offset().top
(浮點數(shù))
鼠標的相對距離
不存在e.target.offsetX這個屬性般妙,只有e.target.offsetLeft這個屬性
注意如果事件綁定在<div><h1></h1></div>上纪铺,鼠標移入h1會觸發(fā)
此時得到的坐標應該為 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)