点导航项跳到章节时，标题落在顶栏下方，第一眼可见。原因是锚点目标有 scroll-margin-top 等于顶栏高度。
产品与设计 · 页面结构与适配
顶部导航布局Top Nav
在页面顶部组织品牌、主导航和全局操作，让吸顶和移动折叠都保持可达。
宽屏、移动、吸顶：亲手走一遍顶栏
一个顶栏要同时说明品牌、当前页和全局操作，并让内容从安全的起点开始。下面这个微型界面可以切尺寸、点导航项、开关吸顶间距，并在移动端用 Escape 关闭菜单。
尺寸吸顶
当前页面：概览。点导航项看当前项与内容标题同步；切移动预览开菜单后可按 Escape 关闭。 对照：实际结果长在导航项、章节标题与徽章上；下一步可切尺寸、切间距或按 Escape 验证焦点。
从演示里提炼的四个知识点
刚才在面板里看到的几何与交互，命名成可复用的判断。
- 顶栏三件套同层：品牌、主导航、全局操作排在页面顶部同一条，承担「这是哪里、能去哪、能做什么」。
- 当前项要可识别：用
aria-current="page"加视觉标记，点导航项后内容标题同步切换。 - 吸顶不能遮挡起点：吸顶顶栏要为锚点跳转预留
scroll-margin-top/scroll-padding-top，否则章节标题藏在顶栏后。 - 窄屏折叠要可关：移动端把导航收进按钮控制的面板，按钮报
aria-expanded，Escape 关闭后焦点回到触发器。
什么时候用顶部导航
从你要解决的问题判断，而不是把它当默认答案。
- 适合：营销主页、文档站、产品控制台等以「横向栏目切换」为主的入口型页面，主导航项不超过 5–7 个。
- 谨慎：栏目继续增加时，顶栏会挤；考虑把次级入口交给侧栏或抽屉，顶栏只留全局操作。
- 不适合单独用：后台复杂表单、沉浸式编辑器、全屏故事——它们更需要侧栏工作区或最小化的浮动条。
怎么用：从布局到可达的最短路径
按顺序回答四个问题，就能落地一个可用的顶栏。
- 定高度：先约定顶栏高度（如 48–64px），全站锚点偏移都引用它。
- 排一行：品牌在左、主导航居中或紧邻品牌、全局操作在右；窄屏隐藏导航换成菜单按钮。
- 标当前：当前页对应导航项加
aria-current="page"，并给视觉差异。 - 防遮挡 + 可达：吸顶时给锚点目标
scroll-margin-top；移动菜单按钮报aria-expanded/aria-controls，Escape 关闭并回焦。
正反例：吸顶顶栏锚点跳转后，标题是否可见
同一个吸顶顶栏，只改一处——是否为锚点目标预留安全间距。
跳转后章节标题贴到页面顶部，被吸顶顶栏盖住，用户需要再滚动才能看到。改进：补上 scroll-margin-top，或给滚动容器 scroll-padding-top。
快速自测
吸顶顶栏下，点导航锚点跳转后章节标题被顶栏盖住，最该补的是哪一项？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。