Bootstrap页面顶部与侧边导航栏随页面滚动实现求助

核心修改方案 #

• 顶部导航栏直接添加Bootstrap内置的fixed-top类，实现滚动时固定在页面顶部
• 侧边Scrollspy导航栏添加sticky-top类，同时通过style="top: 70px;"设置顶部偏移值（数值需匹配顶部导航栏的高度），让它随页面滚动保持可见
• 给页面主体添加上边距，避免内容被顶部固定导航遮挡：body { padding-top: 70px; }（数值根据实际导航高度调整）

具体代码调整示例 #

HTML部分修改 #

1. 顶部导航栏：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  <!-- 导航栏内部内容 -->
</nav>

2. 侧边Scrollspy导航栏：

<div class="col-md-3">
  <nav id="navbar-example3" class="navbar navbar-light bg-light sticky-top" style="top: 70px;">
    <nav class="nav nav-pills flex-column">
      <a class="nav-link" href="#item-1">Item 1</a>
      <a class="nav-link" href="#item-2">Item 2</a>
      <!-- 更多导航项 -->
    </nav>
  </nav>
</div>

CSS补充 #

body {
  padding-top: 70px; /* 适配fixed-top导航，防止页面内容被遮挡 */
}

额外注意事项 #

• 确保Scrollspy的目标容器正确设置data-bs-spy="scroll"和data-bs-target="#navbar-example3"属性，且容器具备可滚动的高度
• 测试不同屏幕尺寸，调整侧边导航的偏移值或响应式样式，避免布局错乱
• 若侧边导航有默认的margin/padding，需同步调整以保证布局协调

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