CSS Sticky Header滚动切换时出现抖动问题求助

数据老陈

2026-6-19

解决方案

1. 移除无效的`position`过渡动画

CSS的transition属性不支持position值的过渡，这段代码不仅无效，还会干扰浏览器的布局计算，直接删除：

.header-fixed {
  position: fixed;
  top: 0;
  /* 删除 transition: position 0.3s ease-in-out; */
}

.header-sticky {
  position: sticky;
  top: 0;
  /* 删除 transition: position 0.3s ease-in-out; */
}

2. 统一使用Sticky布局，避免切换position属性

Fixed和Sticky的布局上下文完全不同（Fixed脱离文档流，Sticky在文档流内），切换时浏览器需要重新计算布局，必然引发抖动。建议始终用Sticky，只切换背景色、阴影等视觉属性：

修改CSS：

.header {
  position: sticky;
  top: 0;
  width: 100%;
  height: 52px;
  z-index: 900;
  /* 只过渡支持动画的属性 */
  transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.header-transparent {
  background-color: transparent;
}

.header-white {
  background-color: white;
  box-shadow: var(--shadow-area-card);
}

修改cva配置：

const headerStyles = cva("w-full h-[52px] flex items-center justify-between sticky top-0 z-[900]", {
  variants: {
    variant: {
      transparent: "bg-transparent",
      white: "bg-white shadow-area-card",
    },
    titleAlign: {
      left: "justify-start",
      center: "justify-center",
    },
  },
  defaultVariants: {
    variant: "white",
    titleAlign: "center",
  },
});