上下滚动页面时如何检测到达顶部的div对应的正确data属性值

• 核心逻辑错误：$(this).offset().top 获取的是元素相对于整个文档顶部的绝对坐标，不会随着页面滚动变化，你需要减去当前页面已经滚动的垂直高度$(window).scrollTop()，才能得到元素顶部相对于当前可见视口顶部的实际距离。
• 判定范围不合理：当页面向上滚动时，已经滑出视口上方的元素的offset().top - scrollTop会变成负数，原有>=0的条件会直接漏掉已经部分进入视口、顶部超出视口但主体仍在可见区域的元素，无法正确识别当前最靠近顶部的div。

$(window).scroll(function() {
  // 获取当前页面垂直滚动距离
  const scrollTop = $(window).scrollTop()
  $(".container").each(function() {
    const $that = $(this)
    // 计算元素顶部相对于当前视口顶部的距离
    const viewportTop = $(this).offset().top - scrollTop
    // 判定范围可根据需求调整，这里保留原300阈值，同时覆盖顶部小幅超出视口的情况
    if (viewportTop >= -100 && viewportTop <= 300) {
      console.log($that.data('map'))
      // 如果只需要输出最靠近顶部的一个，匹配到后可以加return false终止each循环
    }
  })
})

.container {
  height: 690px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container" data-map="One">One</div>
<div class="container" data-map="Two">Two</div>
<div class="container" data-map="Three">Three</div>
<div class="container" data-map="Four">Four</div>
<div class="container" data-map="Five">Five</div>

如果只需要获取当前唯一处于顶部的div，可以在匹配到第一个符合条件的元素后添加return false终止each遍历，避免同时输出多个符合条件的结果。

内容的提问来源于stack exchange，提问作者Behseini