移动端position: sticky不生效主因是父容器限制或浏览器兼容性问题：iOS Safari 15.4+才完整支持overflow非visible祖先内的sticky；Android Chrome中transform/will-change/filter会禁用sticky；需避免父级overflow:hidden/auto/scroll及硬件加速属性，优先用top:0并配合height/滚动上下文，小屏降级fixed+JS动态适配。
移动端 position: sticky 不生效的常见原因
直接写 position: sticky 在手机上没反应，大概率不是 CSS 写错了，而是被「父容器限制」或「浏览器兼容性卡住」。iOS Safari 15.4+ 才完整支持 position: sticky 在 overflow 非 visible 的祖先元素内生效；Android Chrome 虽支持较早，但若父级有 transform、will-change 或 filter，也会强制关闭 sticky 行为。
实操建议：
- 检查最近一个非
static定位的祖先是否设置了overflow: hidden | auto | scroll—— 这会截断 sticky 的锚定范围 - 避免在 sticky 元素或其任意父级上使用
transform: translateZ(0)或will-change: transform（常被用于“强制硬件加速”，反而破坏 sticky） - 用
top: 0（不能是bottom或right）+ 父容器有明确高度/滚动上下文，sticky 才可靠
用 @media 降级 fallback：当 sticky 不可用时切回 position: fixed
不能只依赖 sticky，尤其要兼容 iOS 14.x 或微信内置浏览器（X5 内核对 sticky 支持极不稳定）。稳妥做法是：默认用 sticky，媒体查询里针对小屏或已知弱支持环境，改用 fixed 并手动处理滚动偏移。
示例逻辑：
立即学习“前端免费学习笔记（深入）”；
使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。
@media (max-width: 768px) {
.header-sticky {
position: fixed !important;
top: 0;
width: 100%;
z-index: 1000;
}
/* 防止 fixed 后内容被遮挡 */
.main-content {
padding-top: 60px; /* 匹配 header 高度 */
}
}注意点：
- 加
!important是为了覆盖原 sticky 声明（否则 cascade 可能不生效） -
padding-top必须和 fixed 元素高度严格一致，否则页面顶部会闪动或留白 - 如果页面有动态 header 高度（比如折叠导航），仅靠 CSS 不够，得配合 JS 监听
resize和scroll重设 padding
真正适配移动端：sticky + vh + 触摸优化
单纯让元素“贴顶”不够，用户在 iOS 上快速滚动时，sticky 元素可能滞后半拍甚至跳帧。根源是 Safari 对 sticky 的合成策略保守。这时候得主动干预布局节奏：
- 把 sticky 容器设为
height: 100vh（而非靠内容撑开），减少重排压力 - 给 sticky 元素加
backface-visibility: hidden，轻微提升合成层稳定性 - 禁用
-webkit-overflow-scrolling: touch（老式 iOS 滚动优化），它和 sticky 存在冲突，现代 iOS 已不需要它 - 如果 sticky 区域含输入框（如搜索栏），iOS 键盘弹出会触发 viewport 缩放，导致 fixed/sticky 错位 —— 此时必须监听
resize事件，用 JS 重置定位
验证与调试：用真机 + Safari Web Inspector 查 sticky 状态
Chrome DevTools 的模拟器骗不了人。iOS 上 sticky 是否激活，看 Safari Web Inspector 的 Elements 面板里该元素的 computed position 值：如果是 sticky 但没贴住，说明锚点失效；如果直接显示 static，说明被父级 overflow 或 transform 抑制了。
关键检查项：
- 选中元素 → Computed → 拉到底看
position实际值 - Elements → Styles 面板确认没有被其他规则（比如第三方 UI 库）用
!important覆盖 - Console 执行
getComputedStyle(document.querySelector('.your-sticky')).position，比面板更实时
最易忽略的是：某些 CMS 或框架（如 Next.js App Router）会在根节点自动注入 transform，不翻 DOM 树根本看不到。
