直接用position: sticky能实现侧边栏粘性定位，但bootstrap默认结构中父容器overflow:hidden、transform或缺失高度会截断粘性上下文；必须显式设置top值、确保祖先无中断属性，并为父容器补全显式高度和overflow-y:auto。
直接用 position: sticky 就能实现，但 Bootstrap 默认结构会悄悄破坏它——不是 CSS 写错了，而是父容器被 overflow: hidden、transform 或缺失高度“截断”了粘性上下文。
为什么 .col-md-3 加了 position: sticky 却不动
常见失效链路是：.row 或外层 .container 套了 overflow: hidden（比如嵌在 .card 或 .modal 里），或者用了 transform（如 .offcanvas、.navbar 自带的平移动画），导致浏览器找不到可滚动祖先。sticky 元素自身若没设 top，也会直接退化为 position: relative。
- 用 DevTools 检查侧边栏的 Computed 面板，确认
position真解析为sticky，不是被覆盖或降级 - 临时把侧边栏父元素的
overflow改成visible，如果突然能粘了，说明原overflow: auto/hidden是问题源头 - 检查从侧边栏向上直到
body的所有祖先，是否有transform、filter、contain: layout -
top必须显式声明，例如top: 64px（匹配导航栏高度），不能只写position: sticky
怎么配 Bootstrap 的父容器让 sticky 生效
Bootstrap 默认不提供滚动上下文，必须手动补全三个硬条件：显式高度、overflow-y: auto、无中断属性。最稳妥的是给侧边栏直系父容器（比如 .col-md-3 外包一层 div）加约束，而不是依赖 .row。
- 给侧边栏容器加类如
sidebar-sticky-wrapper，CSS 中设：max-height: calc(100vh - 64px)+overflow-y: auto - 确保
html, body { height: 100%; margin: 0; }，否则100vh在 flex 布局中可能失效 - 避免把侧边栏放在
.offcanvas或.navbar内部——它们的transform会创建新层叠上下文，直接废掉sticky - 如果用
display: flex布局主容器，侧边栏加align-self: start，防 Safari 下拉伸变形导致top偏移错乱
移动端和 Firefox 下的抖动与错位
iOS Safari ≤15.4 对 flex 容器内 sticky 支持不稳定；Firefox 则对图片加载中、字体未就绪或 scroll-behavior: smooth 敏感，容易卡顿或跳动。
- 给侧边栏根元素加
will-change: transform或transform: translateZ(0)，强制开启合成层 - 禁用
scroll-behavior: smooth测试是否干扰，临时关闭可验证 - 避免在
sticky元素上同时设margin-top和top，冲突会导致位置计算异常 - 不用
calc(100vh - 80px)这类动态视口计算作为父容器高度——Firefox 下可能因字体加载延迟导致初始高度塌缩
响应式断点下如何平滑关闭或切换定位
移动端强行保留 sticky 容易遮挡内容、误触，应该用媒体查询主动退出，而不是让它“失效”。
- 桌面端启用：
@media (min-width: 992px) { .sidebar-inner { position: sticky; top: 24px; } } - 小屏关闭：
@media (max-width: 991.98px) { .sidebar-inner { position: static; } }——必须写static，不能只删掉sticky声明，否则旧值可能继承 - 如果小屏要转为底部固定（如抽屉菜单），改用
position: fixed; bottom: 0; width: 100%; z-index: 100;，同时显式重置top: auto; left: auto;避免冲突
真正容易被忽略的是：侧边栏固定后，右侧内容区必须靠 margin-left 主动避让，而不是指望栅格自动排开——sticky 不脱离文档流，但也不参与宽度分配，这点和 fixed 有本质区别。
