滚动问题时左右移动元素

Posted 2023-03-06

【中文标题】滚动问题时左右移动元素

【英文标题】：move element right and left while scrolling issue

【发布时间】：2016-04-09 14:32:27

【问题描述】：

在此示例中，我试图在上下滚动时左右移动元素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

.containerwidth:100%; position: relative; float:left; background:#fff; height:1200px;
.innerwidth:150px; height:100px; position:absolute; top:20%; left:10%; background:red;

【参考方案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/

【讨论】：

它可以工作，但它不会回到原来的地方看到这个jsfiddle.net/x0vtopzv/5

这可能是由于样式给出了不正确的左偏移。让我看看:)

@phpUser：是的。 JSFiddle 在body 上有 8px 的边距。 jsfiddle.net/TrueBlueAussie/x0vtopzv/6 那会抛出偏移位置，需要删除或考虑。

我有一个带有引导程序的页面，但有同样的问题，虽然 body 和 html 是 0 margin 0 padding 有什么办法可以调整这个吗？我已将 var st = $(this).scrollTop() 更改为 var st = $(this).scrollTop()-50 并在大屏幕上工作，但在平板电脑和手机上它移到了左侧

@PHPUser：我看过代码，它遍历祖先来计算元素的正确偏移量，但不记得细节。开始谷歌搜索那个问题？ :)