javascript - 无论浏览器位置如何，固定背景(包括说明图片!)

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);
})()