javascript - 如何获得元素的“固定”位置？

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 个像素左右。y即，即使照片的顶部边缘距离浏览器窗口顶部大约 5 像素，它也会给我负值。

score 5 · Accepted Answer

更新：

解决方案现在取决于JSizes和几个辅助方法：

function Point(x, y) {
    return {
        'x': x,
        'y': y,
        'left': x,
        'top': y
    };
}

$.fn.outerOffset = function () {
    /// <summary>Returns an element's offset relative to its outer size; i.e., the sum of its left and top margin, padding, and border.</summary>
    /// <returns type="Object">Outer offset</returns>
    var margin = this.margin();
    var padding = this.padding();
    var border = this.border();
    return Point(
        margin.left + padding.left + border.left,
        margin.top + padding.top + border.top
    );
};


$.fn.fixedPosition = function () {
    /// <summary>Returns the "fixed" position of the element; i.e., the position relative to the browser window.</summary>
    /// <returns type="Object">Object with 'x' and 'y' properties.</returns>
    var offset = this.offset();
    var $doc = $(document);
    var bodyOffset = $(document.body).outerOffset();
    return Point(offset.left - $doc.scrollLeft() + bodyOffset.left, offset.top - $doc.scrollTop() + bodyOffset.top);
};

score 4 · Accepted Answer

采用：

element.getBoundingClientRect();

在 JQuery 插件中：

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

看：

score 1 · Accepted Answer

您的代码看起来不错，应该可以按您的预期工作。

也就是说，.offset() 有一个“陷阱”，它不会考虑应用于 DOM 主体的任何填充、边距或边框。它找到元素相对于文档的偏移量，而不是窗口。

http://api.jquery.com/offset/

从文档中：

注意：jQuery 不支持获取隐藏元素的偏移坐标或考虑在 body 元素上设置的边框、边距或填充。

一些 css 应该有望修复奇怪的结果：

body { margin: 0; padding: 0; border: none; }

javascript - 如何获得元素的“固定”位置？

3 回答 3

Related

Reference