相对于页面滚动背景

Question

这是我第一次使用 Stack Overflow，所以如果我的问题有点冗长，我深表歉意。我有点困惑：

我想创建这种视差滚动效果，其中背景图像（其高度大于窗口的高度）始终与您在页面上的进度直接相关地滚动。

例如，当您向下滚动页面 25% 时，背景图像应该滚动了 25%。当您滚动到页面的最底部 (100%) 时，背景图像也应该滚动到底部 (100%)。

使用这种视差效果，背景图像仍会滚动，但不会平铺或需要拉伸。但是，使用我当前的代码（如下所示），背景 确实 以比页面内容慢得多的速度滚动；但是它最终会到达背景的底部并开始平铺。

我觉得我在数学上遗漏了一些东西。有什么想法吗？

这是我正在使用的 jQuery：

注意：背景图片的高度为 1200 像素

$(window).scroll(function() {
    var x = $(this).scrollTop(); /* Scroll Position */
    var y = $('html').height(); /* Height of Page */
    var z = x / y; /* Progress of current position on page */
    $('html').css('background-position', '0% ' + (z * 1200) + 'px');
});

编辑：我发现了问题：就像您在视口底部之前不会开始滚动页面一样，在此之前我不应该开始滚动背景图像点要么。所以我现在需要的是一个新功能。如果 r 是视口高度，则该函数在向下滚动时不应将背景图像向下移动前 r 个像素，也不应将背景图像向上移动向上滚动时的最后 r 个像素。男孩，这正在变成一个真正的视差滚动项目。有什么建议？

Answer 1

我想这就是你想要的：

$(window).scroll(function() {
  var scrollPos = $(this).scrollTop();
  var pageHeight = $(document).height() - $(this).height();
  var progress = scrollPos / pageHeight;
  var backgroundOffset = (progress*100) + '%';
  $("html").css("background-position", "0% " + backgroundOffset);
});

See demo