перемещать элемент вправо и влево при прокрутке вопроса

Question

Я пытаюсь переместить элемент влево и вправо при прокрутке вверх и вниз в этом примере FIDDLE проблема заключается в том, что div будет продолжать перемещаться, чтобы выйти из страницы и не вернуться в исходное положение. Это пример, который я пытаюсь моделировать Original Example

HTML

<div class='container'> 
<div class='inner'> 
</div> 
</div> 

JS

var lastScrollTop = 0; 
$(window).scroll(function(event){ 
var st = $(this).scrollTop(); 
if (st > lastScrollTop){ 
    var offset = $(".inner").offset(); 
    var w = $(window); 
    var x = offset.left; 
    console.log(x); 
    $(".inner").css("left",x+50); 
} else { 
    var offset = $(".inner").offset(); 
    var w = $(window); 
    var y = offset.left; 
    console.log(y); 
    $(".inner").css("left",y-50); 
} 
lastScrollTop = st; 
}); 

CSS

.container{width:100%; position: relative; float:left; background:#fff; height:1200px;} 
.inner{width:150px; height:100px; position:absolute; top:20%; left:10%; background:red;} 

Answer 1

Вам нужно, чтобы компенсировать его прокрученного сумму, не перемещайте его на сумму каждый раз. Вы размещаете несколько очередей и каждый раз добавляете 50 пикселей.

var offset = $(".inner").offset(); 
$(window).scroll(function(event) { 
    var st = $(this).scrollTop(); 
    $(".inner").css("left", st + offset.left); 
}); 

JSFiddle:https://jsfiddle.net/TrueBlueAussie/x0vtopzv/1/

После того, как он привязан к прокрутке, вы можете отрегулировать положение с помощью множителя на величину st.

Примечание: JSFiddle имеет разность в 8 пикселей на body. Это выбрасывает позицию смещения и ее необходимо удалить или принять во внимание.

https://jsfiddle.net/TrueBlueAussie/x0vtopzv/6/