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

如何解决div 的 position.top 在滚动时不断变化

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

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

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

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

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

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

解决方法

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

,

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

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>