函數獲取元素相對於最頂層窗口的位置

這可能已經被問到了，但是我無法找到我正在嘗試做的任何修復。函數獲取元素相對於最頂層窗口的位置

我正試圖找到事件對象上的屬性的神奇組合，以及滾動和其他偏移量，以給出元素相對於可能存在或不存在於其中的最頂部窗口的位置iframe。我正在這樣做，試圖淡化被淹沒的元素右側的小（絕對位置）圖像。

我想獲得一個jQuery懸停事件的位置。我曾嘗試以下性質的不同組合：

$(element).position() 
$(element).offset() 
$(element).scrollTop() 
$(element).scrollLeft(); 
$(document).scrollTop(); 
$(document).scrollLeft(); 
event.clientX 
event.clientY 
event.pageX 
event.pageY

有誰有一個函數或公式，可以給這些號碼？

來源

2012-08-14 jbabey

您是在尋找鼠標的位置，還是鼠標懸停在其中的元素的左上角的位置？ – jackwanders 2012-08-14 15:09:47

@jackwanders元素的位置 – jbabey 2012-08-14 15:11:09

你能告訴我們你正在使用的HTML嗎？ – jackwanders 2012-08-14 15:12:32

我已經成功地欺騙了一些代碼，造成這種情況的工作。希望這可以幫助未來的人：

var timeoutID; 
$(element).hover(function() { 
    // cancel any pending fades 
    window.clearTimeout(timeoutID); 

    var offset = { 
     left: 0, 
     top: 0 
    }; 

    if (top !== self) { 
     offset = top.$('#divContainingIframes').offset(); 
    } 

    var that = $(this); 
    var elementPosition = that.position(); 

    var xCoord = offset.left + // distance between screen and iframe 
     elementPosition.left + // distance between iframe and element 
     that.width() + // width of the element 
     5; // 5 pixel padding 

    var yCoord = offset.top + // distance between screen and iframe 
     elementPosition.top; // distance between iframe and element 

    // call the show function with xCoord and yCoord 
}, function() { 
    // don't fade immediately, wait a half second 
    timeoutID = setTimeout(function() { 
     // call some hide function 
    }, 500); 
});

來源

2012-08-14 17:51:26 jbabey

在現代瀏覽器的最簡單的方法是其中document.querySelector('.foo').getBoundingClientRect()return的和object包含屬性top和left，這是元件相對於所述viewport的偏移量。

上述方法IE >= 5工作與幾個簡單的黑客看到http://ejohn.org/blog/getboundingclientrect-is-awesome/

或者您可以使用jQuery.offset()方法，如果你在頁面上有jQuery。這將一直跨瀏覽器返回elementsoffset。

獲得該元件的offset從可以根據您的試圖從即位置在同一頁element這可能是一個，或是在運行該腳本會有點麻煩與在

的element根頁面如果你在第一種情況下，你不需要，只要做什麼作爲你的元素被重新定位某處裏面，你已經有了正確的偏移量。

如果你是外面的你需要採取iframe.getBoundClientRect()偏移考慮，爲element.getBoundingClientRect()相對於它自己的viewport（在）

來源

2012-08-14 16:12:32 AshHeskes

函數獲取元素相對於最頂層窗口的位置

回答

相關問題