position.top 的 div 在滚动时不断变化

Question

我必须计算自滚动容器内一系列 div 的 position().top。

位置在加载时计算正确，但在滚动时不断变化。

这是一支笔：https://codepen.io/frontend2020/pen/GRWJVvq（打开控制台查看滚动上的数字变化）

我需要那个初始数字永远不会改变，这可能吗？

如果我将相同的逻辑应用于 $(document).on("scroll", xxx); 而不是 $(".container").on("scroll", xxx);，那么这个数字永远不会改变，这也是我希望在我的情况下也是如此。

非常感谢任何提示或解决方案

Answer 1

为了保留初始值，您可以在页面加载时将它们保存为数据属性：

function saveInitalTopValueAsDataAttribute() {
  $(".container div").each(function () {
    $(this).data('top', $(this).position().top);
  });  
}

$(document).ready(function() {
    saveInitalTopValueAsDataAttribute();
});

$(".container").on("scroll", function() {
    $(this).find('div').each(function(){
      console.log( $(this).data('top') );
    });
});

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body * {
  box-sizing: inherit;
}

.container {
  margin: 0 auto;
  width: 800px;
  height: 300px;
  overflow: auto;
}
.container div {
  height: 400px;
  background: red;
}
.container div:first-child {
  background: #000;
}
.container div:last-child {
  background: purple;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="first"></div>
  <div class="second"></div>
  <div class="third"></div>
</div>

Answer 2

使用offsetTop代替position().top；这是示例codepen link

position.top 的 div 在滚动时不断变化

position.top of a div changing constantly on scroll

jquery

scroll

position

offset

onscroll