Bootstrap 4中fixed-top导航栏与sticky-top元素滚动显示问题咨询

嘿，这个问题属于使用错误哦，我来给你拆解下原因和解决办法：

问题根源 #

你用给body设置padding-top来适配fixed-top导航栏的方式，和Bootstrap的sticky-top组件的定位逻辑冲突了。sticky-top是基于最近的滚动容器实现粘性定位的，当你给body加了顶部内边距，侧边栏的粘性定位基准被打乱，导致滚动时它无法正确保持在可视区域，也就出现了你说的滚动前后状态没变化、看不到侧边栏的问题。

解决方案 #

1. 调整padding的应用对象 #

不要给body设置padding-top，而是把这个内边距加到包裹页面主内容的容器上（比如Bootstrap的container或者你自定义的内容容器），内边距的值等于你的fixed导航栏的高度（一般是56px或70px，根据导航栏实际高度调整）。

2. 确保侧边栏父容器样式正确 #

检查你的sticky-top侧边栏的父容器，不要给它设置overflow: hidden、position: absolute这类会破坏粘性定位的样式，确保父容器能让侧边栏以视口作为定位基准。

调整后的代码示例 #

<!-- Fixed导航栏 -->
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

<!-- 主内容容器，添加padding-top避开导航栏 -->
<div class="container" style="padding-top: 70px;">
  <div class="row">
    <!-- 侧边栏 -->
    <div class="col-md-3">
      <div class="sticky-top">
        <ul class="list-group">
          <li class="list-group-item active">Cras justo odio</li>
          <li class="list-group-item">Dapibus ac facilisis in</li>
          <li class="list-group-item">Morbi leo risus</li>
          <li class="list-group-item">Porta ac consectetur ac</li>
          <li class="list-group-item">Vestibulum at eros</li>
        </ul>
      </div>
    </div>
    <!-- 右侧主内容（放长内容测试滚动） -->
    <div class="col-md-9">
      <p>测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容</p>
      <p>测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容</p>
      <p>测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容</p>
      <p>测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容</p>
      <p>测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容</p>
      <p>测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容</p>
      <p>测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容</p>
      <p>测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容</p>
      <p>测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容</p>
      <p>测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容</p>
    </div>
  </div>
</div>

这样调整后，主内容会避开fixed导航栏，而sticky-top侧边栏会在滚动时牢牢固定在视口顶部区域，你就能一直看到它啦。

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