Question

这是我第一次使用Stack Overflow，所以如果我的问题有点冗长，我会道歉。我有点窘迫：

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

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

使用这种视差效果，背景图像仍然会滚动，但它不会平铺或需要拉伸。但是，使用我当前的代码（如下所示），背景滚动的速度远远低于页面上的内容;然而它最终到达背景的底部并开始平铺。

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

以下是我使用的jQuery：

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

$(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

滚动背景相对于页面

1 个答案: