在Bootstrap中滚动到固定面板后面

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<div id="section1" class="container">
  <div class="card">
    <div class="card-body">
      <!-- 内容 -->
    </div>
  </div>
</div>

<nav class="navbar navbar-expand-lg navbar-light bg-light" id="navbar">
  <div class="container">
    <!-- 导航栏内容 -->
  </div>
</nav>

<script>
  $(function() {
    $('body').scrollspy({ target: '#navbar' });
  });
</script>

/* 自定义样式 */
.navbar .nav-link.active {
  font-weight: bold;
}

/* 滚动到固定面板后面的效果 */
body {
  padding-top: 70px; /* 导航栏高度 */
}

.card {
  margin-top: -70px; /* 导航栏高度 */
}