如何用jQuery实现滚动时平滑隐藏表头信息并调整表头高度？

滚动抖动的核心原因通常是滚动事件触发过于频繁导致的频繁重排重绘，以及过渡属性选择不当。以下是针对性的优化方案，实现price元素平滑隐藏和表头高度的流畅调整：

一、核心优化思路 #

1. 节流滚动事件：减少滚动时的样式计算频率，避免浏览器压力过大。
2. 使用GPU友好的过渡属性：优先选择opacity、transform、max-height这类不会触发重排的属性，替代直接修改height或display。
3. 用类切换替代直接操作样式：让CSS负责过渡逻辑，JS只负责状态切换，提升性能和可维护性。

二、完整实现代码 #

HTML结构 #

<div class="table-container">
  <table class="sticky-table">
    <thead>
      <tr>
        <th>商品名称</th>
        <th class="price-col">价格</th>
        <th>库存</th>
      </tr>
    </thead>
    <tbody>
      <!-- 示例表格行，实际可替换为你的内容 -->
      <tr><td>商品A</td><td>¥99</td><td>100</td></tr>
      <tr><td>商品B</td><td>¥199</td><td>50</td></tr>
      <tr><td>商品C</td><td>¥299</td><td>30</td></tr>
      <tr><td>商品D</td><td>¥399</td><td>20</td></tr>
      <tr><td>商品E</td><td>¥499</td><td>10</td></tr>
      <tr><td>商品F</td><td>¥599</td><td>5</td></tr>
      <tr><td>商品G</td><td>¥699</td><td>3</td></tr>
      <tr><td>商品H</td><td>¥799</td><td>2</td></tr>
      <tr><td>商品I</td><td>¥899</td><td>1</td></tr>
      <tr><td>商品J</td><td>¥999</td><td>0</td></tr>
    </tbody>
  </table>
</div>

CSS样式 #

.table-container {
  overflow-y: auto;
  height: 400px; /* 固定容器高度，触发滚动 */
  border: 1px solid #eee;
}

.sticky-table {
  width: 100%;
  border-collapse: collapse;
}

.sticky-table th,
.sticky-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
  text-align: left;
}

.sticky-table thead {
  position: sticky;
  top: 0;
  background-color: #fff;
  /* 初始表头高度通过max-height控制，设置过渡 */
  max-height: 60px;
  transition: max-height 0.3s ease-in-out;
}

/* 滚动状态下的表头样式 */
.sticky-table thead.scrolled {
  max-height: 40px;
}

.price-col {
  /* price元素初始状态 */
  opacity: 1;
  transform: translateY(0);
  /* 过渡动画，使用GPU加速属性 */
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* 滚动状态下隐藏price元素 */
.sticky-table thead.scrolled .price-col {
  opacity: 0;
  transform: translateY(-10px); /* 向上偏移隐藏，比display:none更平滑 */
  pointer-events: none; /* 隐藏后禁止交互 */
}

JavaScript逻辑 #

// 节流函数：限制滚动事件触发频率，避免频繁重绘
function throttle(func, delay = 16) {
  let lastExecutionTime = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastExecutionTime >= delay) {
      func.apply(this, args);
      lastExecutionTime = now;
    }
  };
}

const tableContainer = document.querySelector('.table-container');
const tableHead = document.querySelector('.sticky-table thead');

// 滚动处理函数：切换表头状态类
const handleScroll = throttle(() => {
  // 当滚动距离超过10px时触发状态切换（留缓冲避免轻微滚动就触发）
  const shouldCollapse = tableContainer.scrollTop > 10;
  tableHead.classList.toggle('scrolled', shouldCollapse);
});

// 绑定滚动事件
tableContainer.addEventListener('scroll', handleScroll);

三、关键优化点说明 #

1. 节流函数：将滚动事件的触发频率限制在约60fps（16ms/次），匹配浏览器的刷新频率，避免不必要的样式计算。
2. max-height替代height：直接修改height会触发元素重排，而max-height的过渡是GPU加速的，能实现更平滑的高度变化。
3. opacity + transform隐藏元素：这两个属性属于浏览器的合成层操作，不会触发重排重绘，比display:none或visibility:hidden的过渡效果更流畅。
4. 状态类切换：通过classList.toggle控制样式，让CSS负责过渡逻辑，JS只处理状态判断，代码更清晰且性能更好。

四、额外注意事项 #

• 确保表头的background-color是不透明的，避免下方内容透过表头显示，影响视觉体验。
• 如果表头有边框或其他装饰元素，记得给这些元素也添加过渡属性，避免过渡时出现边框抖动。
• 测试不同设备的滚动行为，比如移动端的触摸滚动，确保过渡效果一致。

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