无论浏览器位置如何，固定背景（包括说明图片！）

Question

如果可能的话，我宁愿在HTML / CSS / JS中这样做，但如果没有，任何事情都会发生。

我正在尝试将网页的背景设置为具有一种绝对位置，无论浏览器窗口在屏幕上的位置如何，都会保留在那里。

图片澄清：

（图片说明：红色轮廓是浏览器窗口，浅蓝色透明图片是图片应始终具有的位置和大小）

Answer 1

您可以使用window.screenX和window.screenY获取窗口的屏幕位置。然后，您可以使用简单的间隔计时器跟踪它：

setInterval(function() {
  $('body').css('backgroundPosition',
              -window.screenX + 'px ' + -window.screenY + 'px');
}, 50);

（使用jQuery，但没有必要。）

Here is a jsbin to demonstrate.它有点跳跃，但它可能会使客户端计算机升温，因此我不会太快地运行计时器。问题是，虽然浏览器会告诉您窗口大小的变化（“调整大小”事件），但它不会通过有关窗口移动的事件告诉您。

这是一个更高效的版本，没有jQuery，并且有一些检查以避免在窗口没有移动时触摸样式。 This doesn't seem to make Firefox or Chrome go too nuts甚至每15毫秒运行一次：

(function() {
  var sx = window.screenX, sy = window.screenY;

  setInterval(function() {
    if (window.screenX !== sx || window.screenY !== sy)
      document.body.style.backgroundPosition = 
         -(sx = window.screenX) + 'px ' + -(sy = window.screenY) + 'px';
  }, 15);
})()