sticky侧边栏滚动到一半停止，是因为父容器高度被锁死而非浏览器bug：sticky仅在最近可滚动祖先的内容高度内生效，超出即退化为static；常见原因是height:100vh导致容器无法随内容伸展，应改用min-height:100vh。
sticky侧边栏滚动到一半就停止，是因为父容器高度被锁死
根本不是浏览器 bug，而是 sticky 严格按规范在工作：它只在“最近可滚动祖先容器”的内容高度范围内生效。一旦滚动超出该容器的 height 边界，position: sticky 就会静默退化为 position: static——你在 DevTools 里看到 computed position 变成 static，就是确凿证据。
最常见诱因是侧边栏父容器写了 height: 100vh。哪怕页面总高 200vh，这个声明也强制容器不伸展，导致它无法成为完整滚动上下文。结果就是：滚动前半段正常吸附，一过 100vh，侧边栏立刻“掉下去”。
-
min-height: 100vh是唯一可靠解法：保初始满屏，又允许随内容撑高 - 别用
height: 100%——它依赖链式父级高度，极易塌陷（尤其在 Flex/Grid 布局中） - 若父容器是 Flex，加
min-height: 0或height: 0强制生成包含块，否则旧 Safari 可能不认
祖先元素 overflow: hidden 或 transform 直接切断滚动上下文
sticky 不是锚定视口，而是锚定“最近的、非 static 定位且可滚动的块级祖先”。只要从侧边栏往上任一层写了 overflow: hidden、overflow: auto、transform、filter 或 will-change，滚动上下文就被截断，sticky 退化为 relative。
典型场景：侧边栏嵌套在 .ant-modal-body、.scroll-view 或带圆角裁剪的卡片里——这些容器常默认加 overflow: hidden 防溢出，却不知顺手废掉了 sticky。
- 用 DevTools 逐级点击父元素，看 Computed →
overflow和transform是否非默认值 - 临时加
overflow: visible !important测试，若 sticky 恢复，问题定位即准 - 必须保留
overflow: hidden？改用clip-path: inset(0)替代，视觉一致但不干扰 sticky
top 值设错或父容器 padding 干扰触发点
top 不是“离视口顶部多远”，而是“离其滚动容器内容区顶部多远”。如果侧边栏父容器有 padding-top: 20px，那 top: 0 实际触发点是距容器 border-box 顶部 20px 处——你看到它卡在半空，可能只是触发偏移了。
更隐蔽的是：若想避开固定 header，top: 64px 在横屏或键盘弹出时会失效。应写成 top: calc(64px + env(safe-area-inset-top))。
-
top值不能大于父容器的padding-top，否则可能永远不触发 - 避免用
bottom控制侧边栏留白——Firefox/Safari 支持差，且侧边栏容器往往无明确底边 - 想留 20px 底部间距？改用父容器
padding-bottom: 20px或内部插占位div
Flex/Grid 父容器在 Safari ≤15.4 中支持不稳定
Safari 对 flex 容器内 sticky 的判定更苛刻：它要求明确主轴方向、可滚动空间和稳定基线。缺一不可，否则出现“闪一下消失”或“滚动一半卡住”。
实操上，仅靠 display: flex 不够，必须显式配齐：
-
flex-direction: column（确保主轴垂直） -
max-height: calc(100vh - 64px)+overflow-y: auto（不能只写overflow: auto） -
align-self: start（防 Safari 下拉伸变形导致top计算偏移） - 绝对不用
display: inline-flex——inline 容器不创建 BFC，sticky 直接失效
真正麻烦的不是写法本身，而是所有条件必须同时满足且无冲突。一个 overflow: hidden、一行没加的 min-height: 0、或 Safari 版本差异，都足以让 sticky 在滚动中途突然退出——它不报错，也不提示，只安静地变回 static。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
