你能获得一个元素在屏幕上的绝对位置(而不是在视口中)吗?

时间:2013-03-05 19:29:55

标签: javascript html css

我想在屏幕上的绝对位置放置一个元素,这样它就会保持在(大致)相同的位置,即使移动浏览器窗口(不滚动)也是如此。这样的事情是否可能?

1 个答案:

答案 0 :(得分:4)

可能不是最优化的解决方案,但您可以使用间隔来检查window.screenXwindow.screenY(如评论中所示)。然后,当这些值发生变化时,使用与最后位置的差异更新位置。类似的东西:

function setPosition(el, x, y) {
    var style = window.getComputedStyle(el);
    el.style.left = parseInt(style.left) + x + "px";
    el.style.top = parseInt(style.top) + y + "px";
}

var sX = window.screenX,
    sY = window.screenY,
    box = document.getElementById("box");

var interval = setInterval(function() {
    if (window.screenX !== sX || window.screenY !== sY) {
        setPosition(box, sX - window.screenX, sY - window.screenY);
        sX = window.screenX;
        sY = window.screenY;
    }
}, 1000/30);

以下是JSFiddle的示例。它在Chrome上有点不稳定。