博客主页瑕疵的CSDN主页 Gitee主页瑕疵的gitee主页⏩ 文章专栏《热点资讯》CSS sticky 用错导航栏不固定了手把手教你避坑目录昨天改页面给导航栏加了position: sticky; top: 0;结果滚动时它像喝醉了一样乱跳。气得我差点把键盘砸了。问题报错代码写得飞起.navbar{position:sticky;top:0;background:#2c3e50;height:50px;}但一滚动导航栏忽隐忽现。明明写了top: 0为啥不固定在顶部核心根源别怀疑CSS是父容器没给它“站稳脚跟”。sticky需要父容器有明确高度或overflow属性。比如body默认高度是自动的sticky找不到参照物只能“飘”。我试了10种方案最后发现父容器没高度sticky就是个摆设。解决代码看错误和正确对比关键在父容器/* 错误写法父容器没高度导航栏乱跳 */body{/* 这里没设高度body高度自动sticky找不到锚点 */}.navbar{position:sticky;top:0;/* 无效 */}/* 正确写法给父容器加高度 */body{height:100vh;/* 或 overflow: auto; *//* 关键让父容器有明确高度 */}.navbar{position:sticky;top:0;/* 现在能固定了 */background:#2c3e50;height:50px;}或者如果父容器不是body/* 用其他容器时也得设高度 */.container{height:100%;/* 必须有 */overflow:auto;/* 选它更保险 */}.navbar{position:sticky;top:0;}避坑总结父容器必须有高度body直接设height: 100vh或给包裹层加height: 100%。别只写top: 0sticky的top是相对父容器的父容器没高度它就“没地儿站”。测试要滚动别只看初始状态。滚动时看导航栏是否贴顶别信“应该能行”。overflow是救命稻草加overflow: auto能解决高度问题比硬设height更灵活。z-index别乱加除非有重叠元素否则会干扰sticky定位。记住sticky不是魔法。它需要父容器“撑住”否则就是个纸老虎。下次用前先检查父容器高度。省下半夜debug的命。