导航栏高度移动端适配异常导致锚点跳转偏移如何修复

我的导航栏在桌面端运行正常：点击导航项时，页面会滚动到对应区域，顶部对齐页面头部。但调整到移动端尺寸时间距就出现了问题：点击导航栏上的「Section 2」时，本应让「Section 2」内容刚好出现在导航栏正下方。
可在JSBin示例中复现问题：使用开发者工具切换到移动端视图，点击导航栏各选项即可看到偏移错误。

基本确定问题和以下CSS代码有关：

.anchor:before { 
  display: block; 
  content: " "; 
  margin-top: -75px; 
  height: 75px; 
  visibility: hidden; 
}

这段代码来自Bootstrap官方相关问题讨论，核心问题是75px是固定写死的桌面端导航栏高度，移动端导航栏高度变化后，偏移值没有对应调整。已经查看过相关Stack Overflow问答，未找到适配自己项目的修改方法。

方案1：CSS媒体查询适配（实现简单，适用于导航栏高度各断点固定的场景） #

直接针对不同屏幕尺寸设置对应的偏移值即可，修改后代码如下：

/* 桌面端默认样式，保留原适配逻辑 */
.anchor:before { 
  display: block; 
  content: " "; 
  margin-top: -75px; 
  height: 75px; 
  visibility: hidden; 
}

/* 移动端断点，可根据你实际的响应式断点调整max-width数值，偏移值和移动端导航栏高度保持一致即可 */
@media (max-width: 768px) {
  .anchor:before { 
    margin-top: -50px; 
    height: 50px; 
  }
}

方案2：动态适配（适用于导航栏高度不固定的场景） #

用CSS变量配合JS自动获取导航栏高度，无需手动维护各断点的偏移值：

1. 替换原有CSS代码：

:root {
  --nav-height: 75px; /* 默认桌面端导航高度 */
}
.anchor:before { 
  display: block; 
  content: " "; 
  margin-top: calc(-1 * var(--nav-height)); 
  height: var(--nav-height); 
  visibility: hidden; 
}

2. 页面中加入以下JS代码：

// 自动同步导航栏高度到CSS变量
function updateNavHeight() {
  // 将 querySelector 内的选择器替换为你项目中导航栏的实际选择器
  const navBar = document.querySelector('header.navbar');
  if (navBar) {
    document.documentElement.style.setProperty('--nav-height', `${navBar.offsetHeight}px`);
  }
}
// 页面加载、窗口尺寸变化时自动更新
window.addEventListener('load', updateNavHeight);
window.addEventListener('resize', updateNavHeight);

内容的提问来源于stack exchange，提问作者garson