Пользовательская проблема прокрутки параллакса ⇐ Jquery

[Anonymous]

У меня есть пользовательский раздел прокрутки параллакса сайта. В разных местах есть речевые пузырьки, и все они прокручиваются на разных скоростях. Вот скриншот о том, как он должен выглядеть:

Однако, если вы прокручиваете вверх, а затем снова в отставке - в раздел. Если вы делаете это достаточно раз, вы можете полностью получить речевые пузыри за пределами этого блока контента. Вот скриншот этого в конечном итоге не выглядит правильно:

Общая концепция здесь заключается в том, что я позиционировал каждую речевую пузыри. Затем, когда пользователь прокручивает код, изменяет свойство «верхнего» для каждого пузыря. Если пользователь прокручивает вниз, он уменьшает значение «верхнего». Если они прокручивают вверх, это увеличивает значение «верхнего». Каждый пузырь представляет собой другое увеличение, поэтому пузырьки, по -видимому, движутся на разных скоростях.var $window = $(window);
var windowHeight = $window.height();
var $quoteBG = $('.philosophy');
var quote1 = $("#quote1");
var quote2 = $("#quote2");
var quote3 = $("#quote3");
var quote4 = $("#quote4");
var quote5 = $("#quote5");
var quote6 = $("#quote6");
var quote7 = $("#quote7");
var quote8 = $("#quote8");
var quote9 = $("#quote9");

var scrolldirection = '-';
var lastScrollTop = 0;
var modifier = '-';
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
scrolldirection = 'down';
} else {
scrolldirection = 'up';
}
lastScrollTop = st;
});

//function to be called whenever the window is scrolled or resized
function Move(){

//if the second section is in view...
if($quoteBG.hasClass("inview")){

if ( scrolldirection == 'down' ) {
modifier = '-';
} else {
modifier = '+';
}

quote1.css( 'top', modifier+'=2');
quote2.css( 'top', modifier+'=1');
quote3.css( 'top', modifier+'=3');
quote4.css( 'top', modifier+'=2.1');
quote5.css( 'top', modifier+'=2.5');
quote6.css( 'top', modifier+'=3');
quote7.css( 'top', modifier+'=2');
quote8.css( 'top', modifier+'=1.5');
quote9.css( 'top', modifier+'=3');

}
}

$window.resize(function(){ //if the user resizes the window...
Move(); //move the background images in relation to the movement of the scrollbar
});

$window.bind('scroll', function(){ //when the user is scrolling...
Move(); //move the background images in relation to the movement of the scrollbar
});


Подробнее здесь: https://stackoverflow.com/questions/326 ... roll-issue