移动端列表首行置顶不能依赖 position: sticky 一劳永逸，因其在 iOS 15.4 前及部分安卓 WebView 中兼容性差；推荐用 transform + JavaScript 动态计算吸附位置，或严格满足父容器高度、无层叠上下文、正确 top 值等 CSS 条件。
移动端列表首行置顶，本质是让某一项在滚动时固定在视口顶部，不是靠 position: sticky 就能一劳永逸——它在 iOS Safari 低版本、部分安卓 WebView 中表现不一致，甚至完全失效。
为什么 position: sticky 在移动端列表里经常失灵
很多开发者直接给 <li> 加 position: sticky; top: 0;，结果在 iPhone 上滑动时“闪一下就掉下去”，或根本不动。原因有三：
- iOS 15.4 之前，
sticky对<ul>/<ol>的子元素支持极差，必须确保父容器有明确高度且未触发层叠上下文（比如没加transform或will-change） - 某些安卓 WebView（如 UC 内核、旧版三星浏览器）压根不识别
sticky，会回退成static - 列表项本身有
flex布局或display: grid时，sticky的锚点计算容易错位
兼容性更强的替代方案：用 transform: translateY() + JavaScript 监听滚动
当需要稳定控制首行位置（比如通讯录按字母分组时“A”始终钉在顶部），更可控的做法是放弃纯 CSS，改用轻量 JS 动态计算。核心逻辑是：
- 监听列表容器的
scroll事件 - 判断当前滚动到哪个分组区域（通过
getBoundingClientRect()） - 对目标首行元素设置
transform: translateY(-${offset}px)，模拟吸附效果
示例关键代码片段：
立即学习“前端免费学习笔记（深入）”；
const list = document.querySelector('.contact-list');
const headers = list.querySelectorAll('.section-header');
<p>list.addEventListener('scroll', () => {
headers.forEach(header => {
const rect = header.getBoundingClientRect();
const listRect = list.getBoundingClientRect();
if (rect.top < listRect.top + 44) { // 44px 是标题高度
header.style.transform = <code>translateY(${listRect.top - rect.top}px)</code>;
header.style.zIndex = '10';
} else {
header.style.transform = 'none';
header.style.zIndex = 'auto';
}
});
});
如果坚持用纯 CSS，必须满足这 3 个硬条件
想让 position: sticky 在移动端真正生效，以下三点缺一不可：
- 父容器（如
<ul>）不能有overflow: hidden或overflow: clip，推荐用overflow-y: auto且显式设height或max-height - 首行元素自身不能有
float、clear，也不能是display: table-row类型 - 必须声明
top值（如top: 0），且该值要小于父容器的border-top或padding-top（否则会被“顶出去”）
注意：iOS 微信内置浏览器的特殊坑
微信 iOS 版（8.0.44 之前）对 sticky 有额外限制：如果列表容器用了 -webkit-overflow-scrolling: touch（为平滑滚动加的），sticky 元素会完全失效。解决方案只有两个：
- 去掉
-webkit-overflow-scrolling: touch（牺牲滚动惯性，但sticky恢复） - 改用上面提到的
transform+ JS 方案（推荐，不影响体验）
真正麻烦的不是写法，而是不同环境对“首行”的定义不统一——有的认为是第一个 <li>，有的要求是带 data-sticky="true" 的自定义节点。上线前务必在真机上用 Safari 开发者工具远程调试滚动行为。
