javascript - 如何获取元素的 "fixed"位置？

Question

我想获取元素相对于窗口的位置(固定位置)。

这是我到目前为止所得到的:

(function ($) {
    $.fn.fixedPosition = function () {
        var offset = this.offset();
        var $doc = $(document);
        return {
            'x': offset.left - $doc.scrollLeft(),
            'y': offset.top - $doc.scrollTop()
        };
    };
})(jQuery);

$('#thumbnails img').click(function () {
    var pos = $(this).fixedPosition();
    console.log(pos);
});

但是当我单击缩略图时，它似乎偏离了大约 10 个像素。即，即使照片的上边缘距离我的浏览器窗口顶部大约 5 个像素，它也会给我 y 负值。

Answer 1

使用:

element.getBoundingClientRect();

在 JQuery 插件中:

$.fn.fixedPosition = function () {
    var rect = this.getBoundingClientRect();
    return {
        x: rect.left,
        y: rect.top
    };
};

参见:

• https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
• https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDOMClientRect