使用jQuery在屏幕上元素的絕對位置

如何使用jQuery找出當前可見屏幕（視口）上元素的絕對位置？使用jQuery在屏幕上元素的絕對位置

我有position:relative，所以offset（）只會給出父級內的偏移量。

我有分層divs，所以$("#me").parent().offset() + $("#me").offset()也沒有幫助。

我需要在窗口中的位置，而不是文檔，所以當文檔滾動時，值應該改變。

我知道我可以加起來所有的父補償，但我想要一個更乾淨的解決方案。

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

任何想法？

更新： 我需要得到我的div的頂部和文檔的頂部之間的確切差距，包括填充/邊距/偏移量？

我的代碼：

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來調整地圖的大小以填充屏幕*

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));

謝謝...

來源

2012-12-18 ATOzTOA

'offset（）'返回偏移量關係這份文件，對你如何定位你的元素無關緊要。一個元素的相對位置，以及任何東西，如何在滾動上發生變化？你確定你不只是在尋找'scrollTop（）'？ – adeneo

如果樣式爲'position：relative'，則offset（）將返回父元素的偏移量。 – ATOzTOA

滾動時，元素和屏幕頂部之間的距離會發生變化，對吧？ – ATOzTOA

見.offset()在這裏the jQuery doc。它給出了相對於文檔的位置，而不是父文件。您可能有.offset()和.position()困惑。如果您想在窗口中的位置而不是文檔中的位置，則可以減去.scrollTop()和.scrollLeft()值來計算滾動的位置。

下面是來自DOC的摘錄：

的.offset（）方法允許我們以檢索元件相對於所述文件的的當前位置。將其與.position（），進行比較，它檢索相對於偏移父級的當前位置。當在全局操作（特別是用於實現拖放操作）的現有頂點上放置新元素時， .offset（）更有用。

要結合這些：

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

您可以嘗試在這裏（滾動顯示的數字變化）：http://jsfiddle.net/jfriend00/hxRPQ/

來源

2012-12-18 09:39:58 jfriend00

新增的jsfiddle滾動時顯示的示範。 – jfriend00

爲什麼我會爲這些即使位置設置不同的值：relative設置？的console.log（$（「＃地圖」）父（）父（）父（）的偏移量（）頂。。。）; （）（）;（）（）; parent（）。parent（）。offset（）。top）; （$（「＃map」）。parent（）。offset（）。top）;}} \t \t \t console.log（$（「＃map」）。offset（）。top）; – ATOzTOA

@ATOzTOA - 我無法回答你的問題，因爲你沒有透露HTML/CSS圍繞#map。父母並不總是與孩子有相同的偏移量（邊距，填充，位置設置，其他孩子，浮動等）。爲什麼要打擾父對象的'.offset（）'？你不需要它。 '.offset（）'爲您提供目標對象的文檔位置，已經爲父偏移量進行了計算。 – jfriend00

對於任何的jQuery元素的絕對座標，我寫了這個功能，它可能不適用於所有css位置類型，但也許它是某人的好開始。

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; 
}

來源

2014-11-20 17:13:06 Marcel

使用jQuery在屏幕上元素的絕對位置

回答

相關問題