Answers:
最初,抓住元素的.offset位置并计算其相对于窗口的相对位置
请参阅:
1. 偏移量
2. 滚动
3. scrollTop
您可以在这个小提琴中尝试一下
以下几行代码说明了如何解决此问题
当执行.scroll事件时,我们计算元素相对于窗口对象的相对位置
$(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>
<div>
。您仅考虑文档滚动,而不考虑其他元素滚动。
尝试边界框。这很简单:
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']();
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,但其他浏览器也可以做到类似
这听起来更像是您想要为链接选择一个工具提示。有很多jQuery工具提示,请尝试使用jQuery qTip。它具有很多选项,并且易于更改样式。
否则,如果您想自己执行此操作,则可以使用jQuery .position()
。有关更多信息,请.position()
访问http://api.jquery.com/position/
$("#element").position();
将返回元素相对于偏移父级的当前位置。
还有jQuery .offset(); 这将返回相对于文档的位置。
TL; DR
headroom_by_jQuery = $('#id').offset().top - $(window).scrollTop();
headroom_by_DOM = $('#id')[0].getBoundingClientRect().top; // if no iframe
.getBoundingClientRect()似乎是通用的。 从jQuery 1.2开始支持.offset()和.scrollTop()。感谢@ user372551和@prograhammer。要在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获取元素相对于文档的位置