uni-app 中 position: sticky 在 iOS 和小程序不生效，因 iOS Safari 低版本及微信小程序 WebView 不支持该属性，需降级为 position: fixed 或动态监听滚动模拟实现。
uni-app 里 position: sticky 为什么在 iOS 和小程序里不生效
因为 iOS Safari 低版本（position: sticky 支持极差，甚至完全忽略。H5 端看似能用，实则依赖父容器高度、溢出设置、文档流位置等隐性条件，稍有不慎就“粘不住”。
实操建议：
- 别指望纯 CSS
sticky跨端可靠，尤其不能用于正式上线的多端项目 - H5 端若坚持用，确保父容器有明确
height或max-height，且未设置overflow: hidden - 小程序端必须放弃
sticky，改用scroll-view+bindscroll手动监听滚动做吸顶判断 - iOS App（使用 uni-app 编译为原生 App）中，WebView 内核由系统决定，iOS 14 及以下大概率失效，必须降级处理
uni-app 实现跨端吸顶页眉的最小可行方案
核心思路是：用 scroll-view 包裹内容区，监听 scrollTop，动态切换页眉的 fixed 样式类。这个方案在 H5、微信小程序、App（iOS/Android）三端均稳定。
关键点：
- 页眉必须脱离文档流（初始用
position: relative，吸顶时切为position: fixed; top: 0;） -
scroll-view必须显式设置height或max-height，否则bindscroll不触发 - 需用
ref拿到页眉 DOM，在onPageScroll（H5）或bindscroll（小程序/App）中判断滚动位置 - 避免高频重绘：加节流（如
throttle30ms），或用requestAnimationFrame批量更新
简例（Vue 3 setup）：
<scroll-view scroll-y="true" :style="{ height: '100vh' }"><view class="header" :class="{ 'header-fixed': isSticky }">标题</view><view v-for="i in 50" :key="i" class="item">{{ i }}</view></scroll-view>
uni-app 吸顶组件封装时容易踩的坑
封装成可复用组件后，常见问题不是逻辑错，而是上下文丢失或样式穿透失败。
典型问题：
- 组件内用
uni.createSelectorQuery()查询页眉高度时，H5 端返回0—— 因为节点未挂载完成，需在onReady或$nextTick后执行 - 小程序中
scroll-view的bindscroll在快速滚动时可能漏帧，导致吸顶延迟半拍 —— 建议用scroll-top属性受控，而非只监听事件 - App 端开启
web-view或嵌入原生模块后，scroll-view行为异常 —— 此时应降级为页面级onPageScroll（仅限非scroll-view场景） - 多个吸顶区域（如分类栏+搜索栏）叠加时，z-index 冲突 —— 必须手动控制层级，避免用默认值
uni-app 多端吸顶性能与兼容性取舍建议
没有“一劳永逸”的吸顶实现。不同端的渲染机制差异太大，强行统一会牺牲体验或增加维护成本。
推荐策略：
- H5 端优先尝试
position: sticky，失败再 fallback 到 scroll-view 方案（可用uni.getSystemInfoSync().platform === 'h5'+ 特性检测） - 小程序端固定用
scroll-view+bindscroll，不要试图 hacksticky - App 端（尤其是 iOS）若对性能敏感，可考虑用原生导航栏（
uni.setNavigationBarTitle）替代自定义页眉，但失去定制自由度 - 所有方案都必须测试“页面返回后滚动位置恢复”场景 ——
scroll-view的scroll-top不会自动还原，需手动缓存
最麻烦的其实是安卓低端机：WebView 渲染卡顿 + scroll-view 滚动抖动 + fixed 元素闪烁。这种情况下，吸顶逻辑得加开关，允许用户关闭动画或降级为静态标题。
