视差效果白色空间

Question

滚动时，我的视差效果会在页面顶部添加空白区域。

我的JavaScript：

<script>
  $(window).scroll(function() {
    var scrolledY = $(window).scrollTop();
    $('.bg').css('background-position', 'left ' + ((scrolledY)) + 'px');
 });
</script>

无滚动

滚动时：

Answer 1

此代码在滚动时添加垂直偏移（以像素为单位），使其向右移动：当图像向下移动时，顶部无需显示任何内容，因此您需要设置background-repeat或控制偏移值并避免设置超出界限后的新价值。此外，您还需要将scrolledY值乘以-1，以使在页面上向上移动的背景上的图像向下滚动，就像在视差效果中一样。

 $(window).scroll(function() {
    var scrolledY = -1 * $(window).scrollTop();
    $('.bg').css('background-position', 'left ' + (scrolledY) + 'px');
 });

你也可以通过将垂直值除以2或类似的东西来控制背景偏移的速度。以下是一个示例：https://jsfiddle.net/panamaprophet/9pkrxjh0/