JQuery 获取元素相对于窗口的位置

小开

这听起来更像是您需要所选链接的工具提示。有很多 jQuery 工具提示，试试 JQuery qTip。它有很多选项，并且很容易改变样式。

否则，如果您想自己做这件事，您可以使用 jQuery.position()。关于 .position()的更多信息在 http://api.jquery.com/position/上

$("#element").position();将返回元素相对于偏移量父元素的当前位置。

还有 jQuery。偏移() ;，它将返回相对于文档的位置。

小开

最佳答案

最初，抓取元素的偏移量位置并计算其相对于窗口的相对位置

请参阅 :
1. < a href = “ http://api.jquery.com/ 抵销”rel = “ norefrer”> 抵销
2. 滚动条
3. ScrollTop < br/>

你可以试试这个 翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳

下面几行代码解释了如何解决这个问题

当执行滚动事件时，我们计算元素相对于窗口对象的相对位置

$(window).scroll(function () {
console.log(eTop - $(window).scrollTop());
});

当在浏览器中执行滚动时，我们调用上面的事件处理函数

代码片段

function log(txt) {
$("#log").html("location : <b>" + txt + "</b> px")
}


$(function() {
var eTop = $('#element').offset().top; //get the offset top of the element
log(eTop - $(window).scrollTop()); //position of the ele w.r.t window


$(window).scroll(function() { //when window is scrolled
log(eTop - $(window).scrollTop());
});
});

#element {
margin: 140px;
text-align: center;
padding: 5px;
width: 200px;
height: 200px;
border: 1px solid #0099f9;
border-radius: 3px;
background: #444;
color: #0099d9;
opacity: 0.6;
}
#log {
position: fixed;
top: 40px;
left: 40px;
color: #333;
}
#scroll {
position: fixed;
bottom: 10px;
right: 10px;
border: 1px solid #000;
border-radius: 2px;
padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="log"></div>


<div id="element">Hello
<hr>World</div>
<div id="scroll">Scroll Down</div>

小开

function getWindowRelativeOffset(parentWindow, elem) {
var offset = {
left : 0,
top : 0
};


// relative to the target field's document
offset.left = elem.getBoundingClientRect().left;
offset.top = elem.getBoundingClientRect().top;


// now we will calculate according to the current document, this current
// document might be same as the document of target field or it may be
// parent of the document of the target field
var childWindow = elem.document.frames.window;
while (childWindow != parentWindow) {
offset.left = offset.left + childWindow.frameElement.getBoundingClientRect().left;
offset.top = offset.top + childWindow.frameElement.getBoundingClientRect().top;
childWindow = childWindow.parent;
}


return offset;
};

你可以这么说

getWindowRelativeOffset(top, inputElement);

我只专注于 IE 按照我的要求，但类似的可以做其他浏览器

小开

试试边界框，很简单:

var leftPos  = $("#element")[0].getBoundingClientRect().left   + $(window)['scrollLeft']();
var rightPos = $("#element")[0].getBoundingClientRect().right  + $(window)['scrollLeft']();
var topPos   = $("#element")[0].getBoundingClientRect().top    + $(window)['scrollTop']();
var bottomPos= $("#element")[0].getBoundingClientRect().bottom + $(window)['scrollTop']();

小开

DR

headroom_by_jQuery = $('#id').offset().top - $(window).scrollTop();


headroom_by_DOM = $('#id')[0].getBoundingClientRect().top;   // if no iframe

.Getbound ingClientRect () 似乎是通用的。从 jQuery 1.2开始就支持。偏移()和 . scrollTop ()。谢谢@user372551和@program。要在 iframe 中使用 DOM，请参见 @ ImranAnsari 的解决方案。

小开

function trbl(e, relative) {
var r = $(e).get(0).getBoundingClientRect(); relative = $(relative);


return {
t : r.top    + relative['scrollTop'] (),
r : r.right  + relative['scrollLeft'](),
b : r.bottom + relative['scrollTop'] (),
l : r.left   + relative['scrollLeft']()
}
}
        

// Example
trbl(e, window);

小开

尝试这样做可以获取元素相对于窗口的位置。

        $("button").click(function(){
var offset = $("#simplebox").offset();
alert("Current position of the box is: (left: " + offset.left + ", top: " + offset.top + ")");
});

    #simplebox{
width:150px;
height:100px;
background: #FBBC09;
margin: 150px 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button">Get Box Position</button>
<p><strong>Note:</strong> Play with the value of margin property to see how the jQuery offest() method works.</p>
<div id="simplebox"></div>

详见@使用 jQuery 获取元素相对于文档的位置