Vị trí tuyệt đối của một phần tử trên màn hình bằng cách sử dụng jQuery

Question

Làm cách nào để tìm ra vị trí tuyệt đối của một phần tử trên màn hình hiển thị hiện tại (khung nhìn) bằng jQuery?

Tôi đang có position:relative, do đó bù đắp() sẽ chỉ cung cấp khoản bù trừ trong phạm vi gốc.

Tôi có div phân cấp, do đó, $("#me").parent().offset() + $("#me").offset() cũng không giúp ích gì.

Tôi cần vị trí trong cửa sổ, không phải tài liệu, vì vậy khi tài liệu được cuộn, giá trị sẽ thay đổi.

Tôi biết tôi có thể thêm tất cả các bù trừ gốc, nhưng tôi muốn có giải pháp sạch hơn.

var top = $("#map").offset().top + 
    $("#map").parent().offset().top + 
    $("#map").parent().parent().offset().top + 
    $("#map").parent().parent().parent().offset().top; 

Bất kỳ ý tưởng nào?

Cập nhật: Tôi cần có khoảng cách chính xác về pixel giữa phần trên cùng của div và phần trên cùng của tài liệu, bao gồm padding/margins/offset?

Mã của tôi:

HTML

<div id="map_frame" class="frame" hidden="hidden"> 
    <div id="map_wrapper"> 
     <div id="map"></div> 
    </div> 
</div> 

CSS

#map_frame{ 
    border:1px solid #800008; 
} 

#map_wrapper { 
    position:relative; 
    left:2%; 
    top:1%; 
    width:95%; 
    max-height:80%; 
    display:block; 
} 

#map { 
    position:relative; 
    height:100%; 
    width:100%; 
    display:block; 
    border:3px solid #fff; 
} 

jQuery để thay đổi kích thước bản đồ để lấp đầy màn hình *

var t = $("#map").offset().top + 
    $("#map").parent().offset().top + 
    $("#map").parent().parent().offset().top + 
    $("#map").parent().parent().parent().offset().top; 

$("#map").height($(window).height() - t - ($(window).height() * 8/100)); 

Thanks ...

Answer 1

Xem .offset() đây trong the jQuery doc. Nó cung cấp cho vị trí liên quan đến tài liệu, chứ không phải cho phụ huynh. Bạn có thể có nhầm lẫn .offset() và .position(). Nếu bạn muốn vị trí trong cửa sổ thay vì vị trí trong tài liệu, bạn có thể trừ các giá trị .scrollTop() và .scrollLeft() cho tài khoản cho vị trí được cuộn.

Dưới đây là một đoạn trích từ doc: Phương pháp

Các .offset() cho phép chúng ta lấy vị trí hiện tại của một yếu tố liên quan đến tài liệu. Tương phản điều này với .position(), để truy lục vị trí hiện tại liên quan đến cha mẹ bị lệch. Khi định vị phần tử mới trên phần tử hiện có để thao tác toàn cầu (đặc biệt, để triển khai kéo và thả), .offset() là hữu ích hơn.

Để kết hợp các:

var offset = $("selector").offset(); 
var posY = offset.top - $(window).scrollTop(); 
var posX = offset.left - $(window).scrollLeft(); 

Bạn có thể thử nó ở đây (cuộn để xem sự thay đổi số): http://jsfiddle.net/jfriend00/hxRPQ/

Answer 2

Đối với các tọa độ tuyệt đối của bất kỳ yếu tố jquery tôi đã viết chức năng này, nó có lẽ không hoạt động cho tất cả các loại vị trí css nhưng có thể là một khởi đầu tốt cho một ai đó ..

function AbsoluteCoordinates($element) { 
    var sTop = $(window).scrollTop(); 
    var sLeft = $(window).scrollLeft(); 
    var w = $element.width(); 
    var h = $element.height(); 
    var offset = $element.offset(); 
    var $p = $element; 
    while(typeof $p == 'object') { 
     var pOffset = $p.parent().offset(); 
     if(typeof pOffset == 'undefined') break; 
     offset.left = offset.left + (pOffset.left); 
     offset.top = offset.top + (pOffset.top); 
     $p = $p.parent(); 
    } 

    var pos = { 
      left: offset.left + sLeft, 
      right: offset.left + w + sLeft, 
      top: offset.top + sTop, 
      bottom: offset.top + h + sTop, 
    } 
    pos.tl = { x: pos.left, y: pos.top }; 
    pos.tr = { x: pos.right, y: pos.top }; 
    pos.bl = { x: pos.left, y: pos.bottom }; 
    pos.br = { x: pos.right, y: pos.bottom }; 
    //console.log('left: ' + pos.left + ' - right: ' + pos.right +' - top: ' + pos.top +' - bottom: ' + pos.bottom ); 
    return pos; 
}