视差效果空白

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

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