导航栏在小屏幕下不吸顶的主因是父容器存在overflow:hidden或transform等破坏层叠上下文的属性，且未设置top值；需用position:-webkit-sticky+position:sticky双声明兼容Safari，并确保父级无溢出裁剪、有明确滚动上下文。
导航栏在小屏幕下不吸顶，滚动就消失？用 position: sticky 最直接
不用 JS 也能实现吸顶，前提是浏览器支持 position: sticky（Chrome 56+、Firefox 59+、Safari 15.4+、Edge 79+）。它比 position: fixed 更省心：只在视口内生效，不影响文档流，也不需要监听 scroll 事件。
关键点是：父容器不能有 overflow: hidden 或 transform，否则 sticky 失效；且必须设置 top 值（比如 top: 0）才触发吸顶行为。
-
<header>或导航外层容器需设position: -webkit-sticky+position: sticky（兼容 Safari） - 确保其父级（比如
<body>或直接包裹的<div>）没有overflow: hidden、transform、will-change等“层叠上下文破坏者” - 加
z-index: 100防止被内容遮挡（尤其有轮播图或卡片堆叠时）
小屏幕下导航文字挤成一团？用媒体查询 + flex-wrap 控制换行
纯靠 white-space: nowrap 强撑，在 375px 屏上必然溢出。更稳妥的做法是让导航项在窄屏下自动换行，并控制高度。
示例 CSS：
立即学习“前端免费学习笔记（深入）”；
@media (max-width: 768px) {
.nav-list {
flex-direction: column;
align-items: flex-start;
}
.nav-item {
width: 100%;
text-align: center;
}
}
- 避免用
display: inline-block+font-size缩放——缩太小看不清，缩不够仍溢出 - 如果用了
flex布局，别漏掉flex-wrap: wrap和justify-content: center，否则换行后左右不对齐 - 移动端点击区域至少
44px × 44px，给.nav-item a加padding，别只靠font-size调整
单页网站锚点跳转后页面卡在顶部？加 scroll-margin-top 补偿吸顶高度
吸顶导航占高 60px，但点击 #about 锚点后，目标元素顶部会贴到视口顶部，被导航盖住。这不是 bug，是默认行为。
修复只需一行 CSS：
h2[id] {
scroll-margin-top: 60px;
}
- 值必须和吸顶导航实际高度一致（含 padding/border），建议用 CSS 变量统一管理：
:root { --nav-height: 60px; }，然后写scroll-margin-top: var(--nav-height) - 不要用 JS 的
scrollIntoView({ behavior: 'smooth', block: 'start' })手动偏移——兼容性差，且在 Safari 上常失效 - 若目标是
<section id="contact">这类块级元素，直接给它加scroll-margin-top即可，无需额外 wrapper
零基础改完还是不生效？优先检查这三处硬性限制
很多“试了没用”其实卡在底层约束，不是代码写错。
- HTML 结构是否扁平？
<nav>必须是<body>直接子元素，或至少父级没设transform（哪怕只是transform: translateZ(0)） - 是否误加了
overflow-x: hidden在<body>或根容器上？这个属性会让 sticky 完全失效 - 是否在本地双击打开 HTML 文件（
file://协议）？某些旧版 Safari 对sticky在 file 协议下支持不稳定，建议用python3 -m http.server启个本地服务测试
吸顶逻辑本身很简单，但它的生效条件像玻璃桥——看着结实，踩错一块就掉下去。重点不在“怎么写”，而在“哪些地方不能动”。
