如何使用jQuery找出当前可见屏幕(视口)上元素的绝对位置?
我有position:relative
,所以offset()只会在父级中给出偏移量。
我有分层div,所以$("#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));
...谢谢
答案 0 :(得分:51)
请参阅the jQuery doc中的.offset()
。它给出了相对于文档的位置,而不是父项。您可能感到困惑.offset()
和.position()
。如果您想要窗口中的位置而不是文档中的位置,则可以减去.scrollTop()
和.scrollLeft()
值以考虑滚动位置。
以下是文档的摘录:
.offset()方法允许我们检索一个的当前位置 元素相对于文档。将此与.position()对比, 它检索相对于偏移父项的当前位置。 将新元素定位在现有元素之上时 操纵(特别是用于实现拖放), .offset()更有用。
结合这些:
var offset = $("selector").offset();
var posY = offset.top - $(window).scrollTop();
var posX = offset.left - $(window).scrollLeft();
您可以在此处尝试(滚动查看数字更改):http://jsfiddle.net/jfriend00/hxRPQ/
答案 1 :(得分:4)
对于我编写此函数的任何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;
}
答案 2 :(得分:3)
顺便说一句,如果有人想在没有jQuery的情况下获取屏幕上元素的坐标,请尝试以下操作:
function getOffsetTop (el) {
if (el.offsetParent) return el.offsetTop + getOffsetTop(el.offsetParent)
return el.offsetTop || 0
}
function getOffsetLeft (el) {
if (el.offsetParent) return el.offsetLeft + getOffsetLeft(el.offsetParent)
return el.offsetleft || 0
}
function coordinates(el) {
var y1 = getOffsetTop(el) - window.scrollY;
var x1 = getOffsetLeft(el) - window.scrollX;
var y2 = y1 + el.offsetHeight;
var x2 = x1 + el.offsetWidth;
return {
x1: x1, x2: x2, y1: y1, y2: y2
}
}