如何在表头粘顶时为其添加CSS阴影（基于Alpine.js）

步骤1：添加基础CSS样式 #

先定义表头的默认样式和粘顶后的阴影样式，默认阴影不显示：

/* 表头基础样式，可根据需求调整 */
.table-header {
  background: #fff;
  transition: box-shadow 0.2s ease;
}

/* 粘顶状态专属样式 */
.table-header.sticky {
  position: sticky;
  top: 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 10; /* 保证表头在其他内容上方 */
}

步骤2：修改Alpine.js代码 #

更新容器div的逻辑，加入状态管理、滚动监听和样式绑定：

<div
  x-data="{ 
    header: $refs.funky,
    isSticky: false,
    headerOffset: 0
  }" 
  x-init="
    // 获取表头初始的顶部偏移量
    headerOffset = header.offsetTop;
    // 监听滚动事件
    window.addEventListener('scroll', () => {
      // 判断是否触发粘顶条件
      isSticky = window.pageYOffset >= headerOffset;
      // 同步表头列宽，解决粘顶后宽度错位问题
      if (isSticky) {
        Array.from(header.querySelectorAll('th')).forEach((th, index) => {
          const originalTh = header.parentElement.querySelectorAll('th')[index];
          th.style.width = originalTh.offsetWidth + 'px';
        });
      } else {
        header.querySelectorAll('th').forEach(th => th.style.width = '');
      }
    });
    // 窗口大小变化时重新计算偏移量
    window.addEventListener('resize', () => {
      headerOffset = header.offsetTop;
    });
  "
>
  <%= yield %>
  <!-- 示例表格结构，你的表头需对应x-ref="funky" -->
  <table>
    <thead x-ref="funky" class="table-header" :class="{ sticky: isSticky }">
      <tr>
        <th>列1</th>
        <th>列2</th>
        <th>列3</th>
      </tr>
    </thead>
    <tbody>
      <!-- 表格内容 -->
    </tbody>
  </table>
</div>

关键逻辑说明 #

• 状态跟踪：用isSticky变量判断表头是否处于粘顶状态
• 滚动触发：对比页面滚动距离和表头初始偏移量，动态更新isSticky
• 样式动态绑定：通过:class="{ sticky: isSticky }"仅在粘顶时添加阴影样式
• 列宽同步：解决粘顶后表头与表格主体列宽错位的问题
• 窗口适配：监听窗口resize事件，重新计算表头偏移量，避免位置判断错误

注意事项 #

• 确保x-ref="funky"绑定的是<thead>或包含表头的容器元素
• 若页面有固定导航栏，需将top: 0改为导航栏的高度（如top: 60px）
• 可根据需求调整阴影的颜色、模糊度等参数

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