uni-app 中 position: sticky 吸顶无效，因小程序平台不支持，H5 需父容器有高度且非 overflow: hidden；推荐 scroll-view + bindscroll 手动监听滚动并动态切换 fixed 定位，配合占位节点防错位，用 requestAnimationFrame 节流提升性能。
uni-app 中用 position: sticky 实现吸顶为什么无效？
因为多数小程序平台（微信、支付宝、百度等）不支持 position: sticky，H5 端虽支持但需父容器有明确高度且不能是 overflow: hidden。直接写 CSS 吸顶在多端下大概率失效。
用 scroll-view + bindscroll 手动监听滚动位置
这是目前最稳定、全平台兼容的方案：监听滚动距离，动态切换元素 fixed 定位状态。
- 给
scroll-view设置scroll-y和固定高度（如height: 100vh），避免使用page全局滚动 - 在
bindscroll回调中读取detail.scrollTop，与吸顶元素原始offsetTop比较 - 用
data控制 class 切换（如is-sticky），CSS 中定义.is-sticky { position: fixed; top: 0; left: 0; right: 0; z-index: 999; } - 注意：
offsetTop需在onReady或nextTick后获取，否则可能为 0（尤其在 Vue 3 的onMounted中要等 DOM 渲染完）
<scroll-view scroll-y="true" @scroll="onScroll" style="height: 100vh;">
<view class="header" :class="{ 'is-sticky': isSticky }">吸顶标题</view>
<view v-for="i in 50" :key="i" class="item">内容 {{ i }}</view>
</scroll-view>
吸顶元素脱离文档流后遮挡/错位怎么办？
加一层占位节点（placeholder）或用 padding 补高，否则吸顶后下面内容会“上跳”。
- 推荐用同尺寸空
view占位：<view v-if="isSticky" class="placeholder" :style="{ height: headerHeight + 'px' }"></view> -
headerHeight可通过uni.createSelectorQuery()在onReady中一次性获取并缓存，避免每次 scroll 都查 DOM - 不要用
padding-top给父容器补高——滚动区域高度变化会导致滚动条跳动 - 若吸顶区域含 input 或 picker，在 iOS 微信小程序中 fixed 元素可能被键盘顶起，此时需监听
keyboardheight动态调整top
性能敏感场景下怎么减少 scroll 回调开销？
频繁触发 bindscroll 会卡顿，尤其低端安卓机。必须节流，但不能简单用 setTimeout 延迟——会导致吸顶响应滞后。
- 用
requestAnimationFrame包裹判断逻辑，确保只在下一帧执行一次定位计算 - 仅当
scrollTop跨越吸顶阈值（如从 isSticky，避免无意义 setData - 避免在 scroll 回调里调用
createSelectorQuery或getComputedStyle，这些是同步阻塞操作
吸顶看似简单，真正跨端稳定的关键在于：**不依赖 CSS 自动行为，自己管住滚动时机、DOM 位置、占位补偿这三件事**。漏掉任意一环，都会在某个平台突然失效。
