javascript - 滚动问题时左右移动元素

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

您需要将其偏移滚动量，而不是每次都移动它。您正在排队多次移动并每次添加 50px。

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 在 body 上有 8px 的边距。这抛出了偏移位置，需要删除或考虑在内。

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