jQuery滚动回顶部时无法移除fixed类的问题求助

嘿，这个问题我之前也踩过坑！核心原因是当你给.table-header添加fixed类后，它脱离了正常的文档流，这时候每次滚动时调用的$header.offset().top会返回0（因为fixed定位的元素是相对于视口的），导致你的判断条件y >= distanceToTop永远为真，自然没法移除fixed类啦。

修复后的代码 #

你只需要提前保存元素初始的顶部距离，而不是每次滚动都重新获取：

$(document).ready(function() { 
  const $header = $('.table-header'); 
  // 提前存储元素在正常文档流中的初始顶部距离
  const initialDistanceToTop = $header.offset().top; 
  
  $(window).on("scroll", (event) => { 
    const y = $(window).scrollTop(); 
    if (y >= initialDistanceToTop) {
      $header.addClass('fixed'); 
    } else {
      $header.removeClass('fixed'); 
    }
  }); 
});

为什么这样有效？ #

• 初始的initialDistanceToTop是元素还在文档流里时的真实顶部位置，不会因为后续添加fixed类而改变。
• 滚动判断时始终以这个固定值为基准，当滚动位置y小于初始距离时，就能正确移除fixed类，让元素回到原来的位置。

如果你的页面后续有动态内容加载（比如AJAX添加元素）导致初始位置变化，那可以在动态内容完成后重新计算initialDistanceToTop，不过你的当前场景用上面的代码就完全没问题啦～

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