移动端position: sticky失效求助：滚动时Header上移

• 检查父元素的overflow属性
  父元素若设置了overflow: hidden/auto/scroll，会破坏sticky的定位逻辑——sticky依赖最近的滚动容器，这类overflow属性会改变滚动上下文。需确保header的所有父级都未设置此类属性，或调整header层级使其脱离受影响的容器。

• 必须设置定位阈值
  仅添加position: sticky不生效，必须配合top: 0（或其他具体数值）才能触发固定逻辑。桌面端可能因布局巧合生效，但移动端严格依赖该配置。示例代码：

.header {
  position: sticky;
  top: 0;
  z-index: 100; /* 防止被其他元素遮挡 */
}

• 确认滚动容器高度
  若header的父元素高度未超过视口，滚动操作不会触发sticky。确保滚动主体是body/html（可设置height: 100%）或高度足够的容器，而非header的直接父级。

• 兼容移动端浏览器
  部分旧版移动端浏览器（如早期iOS Safari）需添加-webkit前缀：

.header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

• 排查transform/filter等属性
  父元素若使用transform、filter或perspective，会创建新堆叠上下文导致sticky失效。检查这些属性是否存在于header的父级中，必要时移除或调整布局。

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