如何实现Bootstrap Grid页面滚动时侧边导航栏固定在顶部

刚好我之前也遇到过类似需求，用Bootstrap自带的工具类就能轻松搞定，不用写复杂的JS，给你梳理下具体实现：

修改后的核心代码结构 #

<div class="row">
  <!-- 应用内容区 -->
  <div class="col-sm-10 col-md-10">
    <div class="col-sm-8 col-md-8">
      <app-content></app-content>
    </div>
    <!-- 内容区其他模块 -->
  </div>

  <!-- 侧边导航栏 - 核心是添加sticky-top类 -->
  <div class="col-sm-2 col-md-2">
    <div class="sticky-top" style="top: 0;">
      <!-- 你的侧边导航内容 -->
      <ul class="nav flex-column">
        <li class="nav-item"><a class="nav-link" href="#">导航项1</a></li>
        <li class="nav-item"><a class="nav-link" href="#">导航项2</a></li>
        <li class="nav-item"><a class="nav-link" href="#">导航项3</a></li>
      </ul>
    </div>
  </div>
</div>

关键细节说明 #

• sticky-top类：这是Bootstrap内置的工具类，本质是给元素加上position: sticky和top: 0的样式，页面滚动时只要元素到达视口顶部，就会自动固定住，完全匹配你的需求。手动加style="top: 0"是为了避免某些场景下默认值不生效的问题。
• 父容器注意事项：侧边栏所在的col-sm-2容器一定不能设置overflow: hidden，否则sticky定位会直接失效，这是很多人踩坑的点。
• 响应式适配：如果想在小屏幕（比如手机）上取消固定效果，换成sticky-md-top即可——这样只有在md及以上尺寸的屏幕才会固定，小屏幕下导航栏会跟着页面正常滚动。

旧浏览器兼容方案（可选） #

如果你的项目需要兼容不支持position: sticky的旧浏览器，可以用简单的JS模拟效果：

const sidebar = document.querySelector('.sticky-sidebar');
const sidebarInitialTop = sidebar.offsetTop;

window.addEventListener('scroll', () => {
  if (window.scrollY >= sidebarInitialTop) {
    sidebar.classList.add('fixed-top');
  } else {
    sidebar.classList.remove('fixed-top');
  }
});

配合CSS：

.fixed-top {
  position: fixed;
  top: 0;
  width: inherit; /* 继承父列的宽度，避免导航栏变宽 */
}

这样就能完美实现你要的滚动时侧边栏固定在顶部的效果啦～

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