Jquery 相对于页面滚动背景

这是我第一次讨论堆栈溢出，如果我的问题有点冗长，我很抱歉。我有点困惑：

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

例如，当您将页面向下滚动25%时，背景图像应滚动25%。当你滚动到页面底部（100%）时，背景图像也应该滚动到底部（100%）

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

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

下面是我使用的jQuery:

注：背景图像的高度为1200px

---

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

我想这就是你想要的：

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

---

您可以发布HTML吗？

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