CSS sticky 用错，导航栏不固定了！

💓 博客主页：瑕疵的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;}

避坑总结

1. 父容器必须有高度：body直接设height: 100vh，或给包裹层加height: 100%。
2. 别只写top: 0：sticky的top是相对父容器的，父容器没高度它就“没地儿站”。
3. 测试要滚动：别只看初始状态。滚动时看导航栏是否贴顶，别信“应该能行”。
4. overflow是救命稻草：加overflow: auto能解决高度问题，比硬设height更灵活。
5. z-index别乱加：除非有重叠元素，否则会干扰sticky定位。

记住：sticky不是魔法。它需要父容器“撑住”，否则就是个纸老虎。
下次用前，先检查父容器高度。省下半夜debug的命。