Фоновая прокрутка в противоположном направлении

Question

Я сделал простое редактирование в этом коде, которое фактически работает при перемещении фона в противоположном направлении от прокрутки, но оставляет пустой пробел в верхней части (даже если фон настроен на повторение). Просто вынул знак "-" со знаком - (прокрутка * 0.15) + 'px').

function parallax(){
  var scrolled = $(window).scrollTop();
  $('.background').css('top',(scrolled*0.15)+'px');
}

Как вы можете видеть, это работает, но фон оставляет большой кусок белого на Вверх. Я что-то пропустил? Большое спасибо!

https://codepen.io/prandam/pen/LYpONZx

Answer 1

Все повторение фона позволяет вам иметь большую высоту. Элемент с фоном по-прежнему находится в верхней части страницы. Ваш начальный топ 0px. Это означает, что как только вы добавите вершину, вы получите пробел.

Установите начальную вершину равной -500px. Измените код прокрутки на это:

  $('.background').css('top',(-500 + scrolled*0.15)+'px');

Answer 2

Попробуйте:

var bodyHeight = parseInt($('body').height());
var bgTop = -1*bodyHeight;
$('.background').css({
  height: (bodyHeight*2)+'px',
  top: bgTop+'px'
});

$(window).scroll(function(e){
  parallax(); 
});

function parallax() {
  var newTop = bgTop + $(window).scrollTop()*0.15; 
  if (newTop === 0) return;
  $('.background').css('top', newTop+'px');
}

достаточно код, самоочевидный