16

ウィンドウに対する要素の位置（固定位置）を取得したい。

これが私がこれまでに得たものです：

(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ピクセル離れている場合でも、負の値が表示されます。

4

3 に答える 3

5

アップデート：

ソリューションは、 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);
};
于 2012-09-06T05:39:00.757 に答える
1

あなたのコードは問題ないように見え、期待どおりに動作するはずです。

そうは言っても、.offset() には、DOM 本体に適用されるパディング、マージン、または境界線を考慮しないという「落とし穴」があります。ウィンドウではなく、ドキュメントに関連する要素のオフセットを見つけます。

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

ドキュメントから：

注: jQuery は、非表示の要素のオフセット座標の取得、または body 要素に設定された境界線、マージン、またはパディングの説明をサポートしていません。

一部の css は、うまくいけば奇妙な結果を修正するはずです:

body { margin: 0; padding: 0; border: none; }
于 2012-09-06T05:11:19.773 に答える