Bootstrap5 sticky-top导航栏锚点滚动内容被遮挡解决方法

代码存在两个直接导致锚点遮挡的核心问题：

• 重复使用id="navbar"：导航栏已经占用该id，下方内容容器又使用同名id，会直接导致Bootstrap滚动监听、平滑滚动的偏移计算逻辑失效
• 未给锚点元素设置对应导航栏高度的滚动预留值，默认锚点跳转严格对齐视口顶部，自然会被固定在顶部的导航栏遮挡内容

1. 修复id冲突 #

删除下方内容容器上重复的id="navbar"属性，保证页面内id唯一，避免Bootstrap组件定位错误。

2. 配置滚动偏移对齐导航栏下边缘 #

通过CSS的scroll-margin-top属性给所有带锚点id的元素设置顶部预留间距，值等于粘性导航栏的实际渲染高度，该属性专门为滚动定位场景设计，不会破坏页面原有排版：

/* 你的导航栏带py-3内边距，桌面端总高度约72px，直接设置对应值即可 */
h4[id] {
  scroll-margin-top: 72px;
}

如果后续调整了导航栏的内边距、高度，同步修改这个数值和导航栏实际高度保持一致即可。

3. 同步滚动监听偏移参数 #

将body标签上的data-bs-offset="100"修改为和上述CSS值一致的data-bs-offset="72"，保证滚动监听的导航激活状态、平滑滚动停止位置完全匹配。

<!-- 自定义偏移样式 -->
<style>
h4[id] {
  scroll-margin-top: 72px;
}
</style>

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<!-- Body 同步offset参数 -->
<body data-bs-spy="scroll" data-bs-target="#navbar" data-bs-offset="72" data-bs-smooth-scroll="true">
  <!-- Navigation Bar 保留原有id -->
  <nav id="navbar" class="navbar navbar-expand-md bg-dark navbar-dark py-3 sticky-top">
    <div class="container">
      <a href="#" class="navbar-brand">Navbar</a>
      <button class="navbar-toggler collapsed d-flex d-md-none flex-column justify-content-around" type="button" data-bs-toggle="collapse" data-bs-target="#navmenu">
            <span class="toggler-icon top-bar"></span>
            <span class="toggler-icon mid-bar"></span>
            <span class="toggler-icon bot-bar"></span>
            </button>
      <div class="collapse navbar-collapse" id="navmenu">
        <ul class="navbar-nav nav-pills ms-auto">
          <li class="nav-item">
            <a href="#about" class="nav-link">About Us</a>
          </li>
          <li class="nav-item">
            <a href="#services" class="nav-link">Services</a>
          </li>
          <li class="nav-item">
            <a href="#art" class="nav-link">Artwork</a>
          </li>
          <li class="nav-item">
            <a href="#contact" class="nav-link">Contact Us</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- 删除重复id -->
  <div>
    <h4 id="about">About Us</h4>
    <p>Batman is a fictional superhero appearing in American comic books published by DC Comics. The character was created by artist Bob Kane and writer Bill Finger, and first appeared in Detective Comics #27 in 1939.</p>
    <img class="w-100" src="https://static1.cbrimages.com/wordpress/wp-content/uploads/2020/08/batman-2.jpg" />
    <h4 id="services">Our Services</h4>
    <p>Superman is a fictional superhero. The character was created by writer Jerry Siegel and artist Joe Shuster, and first appeared in the comic book Action Comics #1. The character regularly appears in comic books published by DC Comics, and has been
      adapted to a number of radio serials, movies, and television shows.</p>
    <img class="w-100" src="https://vignette.wikia.nocookie.net/marvel_dc/images/a/a5/Superman_Vol_5_1_Textless.jpg/revision/latest?cb=20180711061148" />
    <h4 id="art">Community Artwork</h4>
    <p>Yoda was a legendary Jedi Master and stronger than most in his connection with the Force. Small in size but wise and powerful, he trained Jedi for over 800 years, playing integral roles in the Clone Wars, the instruction of Luke Skywalker, and unlocking
      the path to immortality.</p>
    <img class="w-100" src="https://vignette.wikia.nocookie.net/starwars/images/d/d6/Yoda_SWSB.png/revision/latest?cb=20150206140125" />
    <h4 id="contact">Contact Us!</h4>
    <p>Discovered as a slave on Tatooine by Qui-Gon Jinn and Obi-Wan Kenobi, Anakin Skywalker had the potential to become one of the most powerful Jedi ever, and was believed by some to be the prophesied Chosen One who would bring balance to the Force.</p>
    <img class="w-100" src="https://vignette.wikia.nocookie.net/disney/images/5/50/Profile_-_Anakin_Skywalker.png/revision/latest?cb=20190313110540" />
  </div>
</body>

补充说明 #

移动端点击导航链接后，汉堡菜单会自动收起，导航栏高度回到默认值，不需要额外针对移动端设置不同偏移量。该方案兼容所有现代浏览器，不会出现JS监听滚动常见的定位卡顿、偏移误差问题。

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