jQuery.position()方法取得不到值的安全替換方法_jquery

呼叫jQuery.position()方法會傳回相對於父元素的位置，jQuery官方文件中描述說，它跟.offset()方法不一樣，.offset()返回的是相對於document的位置，而.position()傳回的是相對於父元素的位置。

但事實上，在使用的過程中，我們發現.position()傳回的值常常是0。但事實不是0。尤其是谷歌瀏覽器和IE瀏覽器裡。火狐瀏覽器沒有此問題。

究其原因，以基於Webkit的瀏覽器(Google瀏覽器和Safari瀏覽器)為例，只有當元素(圖片、flash等)完全載入後，瀏覽器才能存取到這些元素的高度和寬度，而火狐瀏覽器是在DOM載入完成後就能存取這些屬性，它不需要知道這個元素的完整尺寸。而谷歌瀏覽器就不行。因此在Google/IE這樣的瀏覽器裡，如果你想使用.position()取得元素的偏移量，往往得到值就是初始值:0。

有一種補救的方法是將你的.position()呼叫放到 $(window).load()事件觸發之後，而不是$(document).ready事件之後。但這種方法也未必可靠。

另外一種變通的方法是用.offset()來換算：

複製程式碼 程式碼如下:

jQuery.fn.aPosition = function() {
    thisLeft = this.offset().left;
    thisTop = this.offset().top;
    thisParent = this.parent();

    parentLeft = thisParent.offset().left;
    parentTop = thisParent.offset().top;

    return {
        left: thisLeft-parentLeft,
        top: thisTop-parentTop
    };
};

這雖然產生了多餘的程式碼，但比較可靠的多，用的讓人放心。