滚动时元素Offset位置不更新，如何实现粘性表格表头？

嘿，这问题很常见！你现在的代码里，blockPos只在页面初始化时被赋值一次，所以不管怎么滚动，控制台输出的都是最初的offsetTop值——因为这个变量根本没在滚动事件里重新计算呀。而且还要注意：offsetTop是元素相对于其定位父元素的距离，这个值不会随着页面滚动而改变，如果你想捕获元素相对于当前视口的位置（用来做粘性表头的关键），应该用getBoundingClientRect()方法来获取更准确的实时位置。

下面是修改后的代码：

// 先获取元素，避免每次滚动都重复查询DOM，提升性能
const block = document.getElementById('block');

window.addEventListener('scroll', function () {
  // 每次滚动时重新计算元素相对于视口的顶部距离
  const blockTopInViewport = block.getBoundingClientRect().top;
  console.log(blockTopInViewport);

  // 如果确实需要相对于父元素的offsetTop（注意这个值不会随滚动变化），也可以在这里重新获取：
  // const blockPos = block.offsetTop;
  // console.log(blockPos);
});

html, body{
 background: grey;
 height: 100%;
 margin: 0; /* 去掉默认边距避免布局问题 */
}
.page{
 background: white;
 height: 2000px; /* 给足够高度让页面能滚动 */
 padding-top: 100px; /* 模拟上方有内容 */
}
#block{
 background: #ccc;
 padding: 10px;
}

补充说明： #

• 把元素查询document.getElementById('block')放到滚动事件外面，是为了避免每次滚动都重新查找DOM，提升性能。
• getBoundingClientRect().top返回的是元素顶部到当前浏览器视口顶部的距离，当页面向下滚动时，这个值会逐渐变小，直到变成负数（元素顶部移出视口）——这正是实现粘性表头的关键判断依据：当这个值小于等于0时，就给表头添加固定定位的类，让它粘在顶部。

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