父容器高度不足导致sticky侧边栏滚动到底部时突然“掉下去”，本质是浏览器因父容器无可滚动余量而将sticky降级为relative；常见原因包括height: 100vh硬设、flex子项未约束高度、祖先overflow:hidden或transform创建新层叠上下文，修复需改height为min-height、移除bfc中断属性并确保滚动上下文连贯。
父容器高度不足导致sticky侧边栏“啪”一下掉下去
sticky侧边栏滚动到底部时突然错位、跳回文档流位置，根本不是动画或JS干扰，而是它失去了粘附的容器边界。浏览器发现父容器已经没有可滚动余量，立刻把position: sticky降级为position: relative，视觉上就是“掉下去”。
常见诱因包括：height: 100vh硬撑、display: contents或float导致父容器塌陷、flex子项未设height约束。
- 用
border: 1px solid red临时加在父容器上，立刻暴露是否高度为0或塌陷 - 改
height: 100vh为min-height: 100vh，允许内容撑开容器 - 用
padding-bottom: 200px（数值 ≥ 侧边栏自身高度）替代固定高度，再配box-sizing: border-box
祖先元素overflow:hidden悄悄截断滚动链
sticky不认body，只找“最近的可滚动祖先”。只要路径上某层写了overflow: hidden、overflow: auto或contain: paint，哪怕没滚动条，也会立刻成为滚动上下文终点——侧边栏只能在那一小块里粘，超出就失效。
尤其在Bootstrap卡片、Modal、Ant Design组件中，.card或.ant-modal-body常默认带overflow: hidden，却没人意识到它正在废掉sticky。
- DevTools里逐层检查Computed →
overflow，临时加overflow: visible !important验证 - 不能删
overflow: hidden时，用clip-path: inset(0)替代——视觉裁剪一致，但不创建BFC - 若父容器是Flex/Grid，确保
align-items或justify-items没把侧边栏拉伸变形，影响left/right锚点基准
transform/filter让sticky彻底失联
这是最隐蔽的坑：给侧边栏的任意祖先加transform、filter或will-change，会强制创建新层叠上下文，导致sticky元素“找不到”原本该绑定的滚动容器。DevTools的Computed面板里position仍显示sticky，但行为已退化为static。
iOS Safari对此尤其敏感，连transform: translateZ(0)这种“无意义优化”都会触发。
- 真机调试时，在Safari开发者工具中检查
position是否真的生效，别信样式面板里的声明值 - 逐层移除可疑的
transform、filter，从html开始往下试 - 避免在侧边栏父级上使用
backdrop-filter或opacity，它们同样会创建隔离上下文
移动端bottom锚点不可靠，别硬刚
想让侧边栏在页面底部“吸住右下角”？bottom: 0在移动端基本是幻觉。iOS Safari 15.4之前完全不支持bottom方向的sticky；微信WebView至今几乎无视它；Android低版本则表现随机。
更致命的是：sticky的bottom锚点依赖父容器有明确高度，而移动端视口高度本身就在地址栏/软键盘弹出时动态变化，100vh经常不准。
- 放弃
position: sticky; bottom: 0方案，改用position: fixed+padding-bottom预留空间 -
padding-bottom必须用calc(var(--nav-height) + env(safe-area-inset-bottom))，不能写死像素 - 如果必须用sticky，只用
top方向，并确保侧边栏父容器是min-height: 100vh且无任何BFC中断
height: 100vh + overflow: hidden + transform三连击。调试时别盯着侧边栏本身，先锁死它的父容器和所有祖先，一层层排除滚动上下文被谁悄悄关掉了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
