滚动背景相对于页面

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

查看演示