原生JS中
ele.getBoundingClientRect()：獲取一個元素相對於瀏覽器視口的的坐標（無論父元素定位與否），返回一個Object對象，該對象有6個屬性：top/left/right/bottom/width/height。幾乎所有瀏覽器都支持該方法。jQuery中沒有直接的方法，需要用$(ele).offset().top-$(document).scrollTop()計算得到。
注意：right是指元素右邊界距窗口最左邊的距離，bottom是指元素下邊界距窗口最上面的距離。
pageYOffset 屬性是scrollY屬性的別名，設置或返回文檔在垂直方向滾動的像素值。window.pageYOffset == window.scrollY;前者瀏覽器兼容性更好。
所以獲取元素在頁面文檔中的位置：
var X= ele.getBoundingClientRect().left+scrollTop;
var Y =ele.getBoundingClientRect().top+scrollTop; //在窗口的位置+文檔滾動掉的尺寸
為了跨瀏覽器兼容，文檔卷掉的長度請使用如下方式：
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
jQuery中
1.鼠標相對於頁面的位置
event.pageX/event.pageY：鼠標相對於頁面左/上邊緣的距離。
2.元素的位置偏移量
offset()：返回包含top和left兩個屬性的對象，相對於document文檔的坐標。
position()：返回包含top和left兩個屬性的對象，相對於最近的已定位的包含元素的位置。若無，則相對於document。只對可見元素有效，注意ele{visibility：hidden}也屬於可見元素。
3.元素的寬高
width()/height()：獲得或設置元素【內容】的寬/高；若元素的display：none，其值為0。
innerWidth()/innerHeight()：獲得包括內邊距（padding）的元素寬度/高度，不包括邊框；
outerWidth()/outerHeight()：獲得包括內邊距(padding)和邊框(border)的元素寬度/高度；
outerWidth(true)/outerHeight(true)：獲得整個元素的寬度/高度，包括外邊距、邊框、內邊距和內容；
注意：
1）ele.css("height")：返回帶有完整單位的字符串（例如400px），若運算需要parseInt轉換。ele.height()：返回一個沒有單位的number數值（例如400）。
2）height()總是返回內容寬度，不管CSS box-sizing屬性值。若CSS box-sizing為border-box，將造成這個函數改變這個容器的outerHeight，而不僅是原來的內容高度。
4.瀏覽器相關寬高
$(window).height()：獲取瀏覽器可視窗口的高度；
$(document).height()：獲取整個網頁文檔的高度；當網頁高度不足瀏覽器窗口時，返回的是$(window).height()。
$(document).scrollTop()：document元素相對document元素對應的滾動條頂部的垂直偏移量，可獲取已滾動的距離或設置將要滾動的距離。
即：當網頁滾動條拉到最低端時，$(document).height() == $(window).height() + $(window).scrollTop()。
注意：不建議使用$("html").height()、$("body").height()這樣的方法獲取高度，原因有：
$("body").height()：body可能會有邊框，獲取的高度會比$(document).height()小；
$("html").height()：在不同的瀏覽器上獲取的高度會有差異，瀏覽器不兼容。
$(window).height()若返回的不是瀏覽器窗口的高度，可能是網頁沒有加上<!DOCTYPE>聲明。