Bootstrap 4固定顶部导航与固定侧边栏实现求助：仅内容滚动

我明白你现在的困扰——已经搞定了顶部导航的固定，但侧边栏用sticky-top就是没效果，没法让它固定在原位不跟着主内容上滑。我来给你分析下原因，再提供几个靠谱的解决方案：

为什么sticky-top会失效？ #

sticky定位的生效有几个前提，很可能你踩了其中一个坑：

• 侧边栏的父元素（比如包裹它的.row或者容器）设置了overflow: hidden/auto，这会直接破坏sticky的定位逻辑
• sticky-top默认的top: 0会被你已经固定的顶部导航遮挡，看起来像是没生效
• 侧边栏的高度没有足够的“滚动空间”触发固定效果（比如侧边栏本身比视口还短）

方案一：用position: fixed直接固定侧边栏（最稳妥） #

这个方法直接粗暴，完全规避sticky的各种限制，步骤如下：

1. 先给顶部导航保留fixed-top，然后给侧边栏加自定义类，用CSS固定它：

/* 固定侧边栏，top值等于顶部导航的高度（Bootstrap默认navbar是56px） */
.fixed-sidebar {
  position: fixed;
  top: 56px;
  bottom: 0;
  width: 25%; /* 对应col-md-3的宽度，根据你的布局调整 */
  overflow-y: auto; /* 如果侧边栏内容太长，让它自己内部滚动 */
}

/* 主内容区域要给侧边栏留出空间，避免被遮挡 */
.main-content {
  margin-left: 25%;
  padding-top: 56px; /* 避免顶部内容被固定导航遮挡 */
}

2. 修改你的HTML结构：

<nav class="navbar fixed-top">
  <!-- 你的导航内容 -->
</nav>

<div class="container-fluid">
  <div class="row">
    <aside class="col-md-3 fixed-sidebar">
      <!-- 侧边栏导航内容 -->
    </aside>
    <main class="col-md-9 main-content">
      <!-- 这里是主页面内容，只会滚动这个区域 -->
    </main>
  </div>
</div>

方案二：修复sticky-top的问题（如果你偏好Bootstrap原生类） #

如果你不想用自定义固定定位，想让sticky-top生效，需要调整这几点：

1. 确保侧边栏的所有父元素都没有设置overflow属性（检查.row、外层容器的CSS）
2. 给sticky-top设置正确的top值，避开顶部导航：

.sticky-top {
  top: 56px !important; /* 覆盖默认的top:0，数值和导航高度一致 */
}

3. 给主内容区域设置滚动限制，让它单独滚动：

.main-content {
  height: calc(100vh - 56px); /* 视口高度减去导航高度 */
  overflow-y: auto;
}

这样调整后，sticky-top就能正常工作，侧边栏会在滚动到导航下方时固定住，主内容区域单独滚动。

你可以根据自己的布局结构选其中一个方案，一般方案一的兼容性和稳定性更好，适合大多数场景~

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