实用教程
用 Claude Opus 5.5 修复被固定导航挡住的页内链接
让 Claude Opus 5.5 添加页内跳转偏移前，先测量导航实际占据的空间，并确认真正滚动的容器。网址片段对应的标题即使存在，也可能被导航遮住。修正还要经得起菜单换行、促销条出现和键盘焦点移动。
让 Claude Opus 5.5 添加页内跳转偏移前，先测量导航实际占据的空间，并确认真正滚动的容器。网址片段对应的标题即使存在，也可能被导航遮住。修正还要经得起菜单换行、促销条出现和键盘焦点移动。
一个固定导航问题报告了这一现象。它是社区需求背景，不是对你的页面的诊断。下面给出带布局计算的修复方法，不声称做过 Opus 实测。
先找缺失的空间应该加在哪里
| 情况 | 检查内容 | 可能的修正位置 |
|---|---|---|
| 每个章节目标都被挡住 | 滚动容器与覆盖层高度 | 容器的 scroll padding |
| 只有一个目标需要额外间距 | 该目标的对齐方式 | 目标的 scroll margin |
| 手机菜单换成两行 | 导航实际占用高度 | 响应式或实测偏移 |
| 获得焦点的控件被挡住 | 键盘路径及全部覆盖层 | 焦点可见性，不只是锚点滚动 |
MDN 的 scroll-margin-top 文档描述的是目标滚动区域的偏移，不要与可见布局外边距混淆。W3C 的 C43 技术演示了用滚动内边距处理遮挡。一次锚点跳转通过，不代表完成了无障碍评估。
算一个偏移，再实际验证
假设页面有 64 CSS 像素高的固定导航，上方紧贴一条 32 像素高的促销条，共占 96 像素；再留出期望的 16 像素间隔，得到 112 像素。若导航换行后高 88 像素，总值变成 136 像素。这是设定尺寸后的计算，不是 Panelly 的测量值。
在横向书写、文档本身滚动、已确认覆盖层高 96 像素的情况下，可以从这个例子开始：
html { scroll-padding-top: 112px; }该值已经含期望间隔。不要习惯性再给目标加 112 像素的 scroll margin，两者叠加可能让间距过大。若仅一个目标需要更多空间，应有意识地设置局部增量。内容在面板内滚动时，要确认真实滚动元素；设置 `html` 不会配置另一个容器。
促销条出现或菜单换行后，固定数值会过时。优先考虑避免覆盖的布局、适合的响应式数值，或谨慎测量并共享高度。字体加载后也要测试。窄屏中导航占用过大时，取消固定定位可能比无限增加偏移更合适。
可复制的 Opus 修复提示词
结合官方 Opus 指南使用：
检查提供的页面结构、生效样式、导航与促销条尺寸，以及失败的网址片段。找出实际滚动容器及影响目标的全部固定或粘性覆盖层。
区分普通文档流间距、容器滚动内边距与目标滚动外边距。计算占用高度加期望视觉间隔，不要在未解释叠加结果时重复添加偏移。考虑菜单换行、字体加载和促销条关闭。
提出保留既有片段 ID 与链接的最小补丁，适用时保留原生导航。不要只为让截图好看就强制把焦点移到标题；如需改变焦点管理，应说明目的。
返回页内点击、直接加载带片段的网址、浏览器后退、Tab 与 Shift+Tab，以及 320/390/1440 CSS 像素布局的测试。加入缩放和两行导航。分别记录目标可见性与焦点控件可见性。未实际观察的浏览器结果保持待测。分别测试两条使用路径
第一条是点击章节链接，以及直接打开同一个带片段的网址。等字体和图片稳定后检查标题上沿，再操作后退。保留原有 ID，让收藏链接继续有效。只在自定义点击处理器运行后才有效，不算通过直接链接测试。
第二条是用 Tab 和 Shift+Tab 遍历链接与控件，确认当前焦点在顶部和底部覆盖层之下仍可见。不能根据鼠标截图推断键盘行为。分别在促销条开启、关闭和放大页面时复查。按视口与状态记录失败，下一次修改才有可重复的依据。
常见决定
**普通 padding 能修复所有锚点吗？** 它改变布局，滚动对齐仍须单独检查。
**每次跳转都要用 JavaScript 吗？** 原生链接与 CSS 能满足实际情况时，先使用它们。
**桌面测一次就够了吗？** 菜单换行和缩放会改变占用空间。
章节导航可用后，在 Panelly Studio 制作匹配的广告素材。导航过程中的动效属于另一项需求，可参考减少动态效果审查。
