Question

我试图在这个例子{@ 3}}中向上和向下滚动时向左和向右移动一个元素问题是div会继续移动到达页面之外并且不会回到原来的位置。这是我尝试模拟FIDDLE

的示例

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/

滚动问题时左右移动元素

1 个答案: