position: sticky 在移动端失效主因是父容器触发层叠上下文或设置 overflow:hidden/auto，ios safari 对 transform、will-change 等更敏感；必须设 top 值、加 -webkit 前缀、显式 z-index。
为什么 position: sticky 在移动端搜索栏上经常失效
直接加 position: sticky 却没吸顶，大概率是因为父容器触发了层叠上下文或设置了 overflow: hidden / auto —— 这会截断 sticky 的定位行为。iOS Safari 尤其敏感，哪怕父元素只是加了 transform 或 will-change，都可能让 sticky 失效。
常见错误场景包括：搜索栏放在 header 里，而 header 又被包在 main 或 section 中，后者设置了 overflow-y: auto；或者整个页面用了 height: 100vh + overflow: hidden 做“全屏布局”。
- 确保 sticky 元素的**最近滚动祖先**是期望的容器（通常是
body或明确设置overflow-y: scroll的父级） - 移除所有可能创建新层叠上下文且非必要的 CSS 属性，如
transform: translateZ(0)、opacity: 0.99、filter: blur(0) - iOS Safari 要求必须指定
top值（不能只写sticky），且推荐用px或rem，避免用%
正确写法：搜索栏吸顶的最小可行 CSS
假设搜索栏结构为 <header class="search-header"><input type="search"></header>，要让它在页面滚动时吸顶到视口顶部：
.search-header {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 100;
background: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
注意三点：
- 必须写
top: 0（iOS 不认top: auto或未声明） - 加上
-webkit-sticky前缀，覆盖旧版 Safari -
z-index要显式设置，否则可能被后续内容遮盖（尤其当页面有 fixed 导航时）
与 position: fixed 的关键区别和取舍
sticky 是“相对定位 + 达到阈值后转为固定”，而 fixed 是脱离文档流、始终相对于视口。这意味着：
- sticky 元素仍占据原文档位置，不会导致下方内容突然上跳（fixed 会导致重排）
- sticky 受父容器限制：如果父容器高度不够或设置了
overflow: hidden，它根本不会“粘住” - sticky 在 iOS 微信内置浏览器（X5 内核）中支持不完整，部分版本需降级为
fixed + JS 监听 scroll - 若搜索栏本身需要响应式高度（比如横屏变高），sticky 更易维护；fixed 则需额外 JS 计算
top值
真机调试时容易忽略的兼容细节
在 iPhone 上测试，发现吸顶卡顿或闪动？很可能是以下任一原因：
- 父容器有
backface-visibility: hidden或perspective—— 移动端渲染层逻辑会干扰 sticky 定位 - 搜索栏内含
input，聚焦时 iOS 自动缩放页面，导致视口尺寸变化，sticky 重新计算出错 - 使用了
viewport的user-scalable=no，某些系统版本下会抑制 sticky 的滚动监听 - 没有设置
min-height: 0在滚动容器上（比如 Flex 布局中的父元素），导致 sticky 计算基准异常
最稳妥的兜底方式：用 @supports (position: sticky) 包裹 sticky 样式，并准备一段轻量 JS，在不支持时 fallback 到 fixed + getBoundingClientRect() 动态更新 top。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
