固定导航栏遮挡锚点内容是 position: fixed 的正常行为，需通过 scrollIntoView 配合 window.scrollBy 动态补偿导航栏高度，而非移除 fixed 或硬编码像素值。
固定导航栏会遮挡锚点目标内容，不是 bug，是 position: fixed 的必然行为；关键不是“去掉 fixed”，而是让滚动定位时主动避开它。
为什么 scrollIntoView 或 hash 跳转后内容被截断
浏览器原生跳转到 #section-1 时，会把元素顶部对齐视口顶部——但此时 .navbar-fixed-top 已经占了顶部空间，导致目标内容实际被盖住。这不是 JS 错误，也不是 CSS 写错，而是定位基准没对齐。
-
scrollIntoView({ block: 'start' })默认对齐视口顶部，必须手动补偿导航栏高度 - 直接访问带 hash 的 URL（如
page.html#faq）时，页面加载完才触发滚动，此时 DOM 已就绪但 offset 还没修正 -
offset().top在 fixed 元素存在时仍返回文档流中的绝对位置，但视口可见区域已上移，所以减去固定值才是真实可视偏移
用 JavaScript 动态修正滚动位置（推荐）
不依赖固定像素值，也不污染 HTML 结构，兼容 Bootstrap 4/5 和 MDB。核心是监听 hash 变化或链接点击，再调用 scrollIntoView + window.scrollBy 补偿。
- 在
<script></script>标签末尾或DOMContentLoaded中执行，确保 DOM 就绪 - 获取导航栏高度用
document.querySelector('.navbar').offsetHeight，比写死70更可靠 - 对点击事件做
event.preventDefault()，避免原生跳转覆盖你的逻辑 - 示例代码：
document.querySelectorAll('a[href^="#"]').forEach(a => {
a.addEventListener('click', e => {
e.preventDefault();
const id = a.getAttribute('href').slice(1);
const el = document.getElementById(id);
if (!el) return;
el.scrollIntoView({ behavior: 'smooth', block: 'start' });
window.scrollBy(0, -document.querySelector('.navbar').offsetHeight);
});
});
// 页面加载时也处理一次（比如直接访问 /page.html#contact）
if (location.hash) {
const el = document.getElementById(location.hash.slice(1));
if (el) {
setTimeout(() => {
el.scrollIntoView({ behavior: 'smooth', block: 'start' });
window.scrollBy(0, -document.querySelector('.navbar').offsetHeight);
}, 100);
}
}
ScrollSpy 配合 offset 时的常见失效点
data-bs-spy="scroll" 不是开个开关就自动高亮，它严重依赖容器结构和 offset 值是否匹配真实导航高度。
- 必须给监听容器（通常是
<main></main>或<div class="content">）加 <code>position: relative，否则offset计算失准 -
data-bs-offset值应等于导航栏高度，但不能只靠经验填60—— 用getComputedStyle(document.querySelector('.navbar')).height动态读取更稳 - 所有目标
<div id="xxx"> 必须在文档流中渲染出来，<code>display: none或visibility: hidden的元素不会被 ScrollSpy 检测到 - 如果用了
scroll-behavior: smooth，ScrollSpy 可能因滚动未完成就判断位置而滞后，建议关闭该 CSS 或延迟触发 -
:target { padding-top: 60px; margin-top: -60px; }在 Safari 旧版或某些移动端 WebView 中支持不全 - 给
加padding-top会导致整个页面下移，底部留白、footer 错位等问题频发 - 导航栏高度随屏幕缩放变化（比如 navbar-collapse 后变矮），写死值会失效
- 如果页面有多个固定元素（如顶部 navbar + 侧边 sidebar），CSS 很难同时兼顾
CSS 方案仅适合静态高度且无 JS 环境
纯 CSS 方法（如 :target 或 padding-top）看似简单，但实际限制多，容易在响应式场景翻车。
真正麻烦的不是“怎么加 offset”，而是“什么时候读 offset”——导航栏高度可能在 DOM 加载后、字体加载后、甚至媒体查询生效后才最终确定。所以最稳妥的做法，是把高度读取和滚动修正都放在 setTimeout 或 requestAnimationFrame 回调里，而不是假设页面一加载就稳定。
