如何用Bootstrap5和CSS实现固定侧边导航栏并避免内容重叠

问题核心 #

直接使用fixed定位会让侧边栏脱离文档流，导致内容区域失去侧边栏的宽度占位，进而出现重叠。Duolingo的固定侧边栏采用保留文档流占位，同时让侧边栏内容固定滚动的模式，无需让整个侧边栏脱离文档流。

具体修改步骤 #

1. 调整侧边栏的定位方式 #

不给整个navPart添加fixed，而是给侧边栏内部的导航容器设置position: sticky并搭配top: 0，既能维持文档流的宽度占位，又能让导航在页面滚动时固定在视口顶部。

推荐使用自定义CSS类替代内联样式：

.sidebar-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto; /* 侧边栏内容过长时允许独立滚动 */
  padding-top: 1rem; /* 可选，避免内容紧贴视口顶部 */
}

2. 修改HTML结构 #

将侧边栏内部的容器替换为自定义类：

<div class="container-fluid d-flex flex-column sidebar-sticky">

3. 完整修改后的代码 #

<body class="container-fluid row">
  <div class="navPart col-md-2 col-sm-2 d-none d-sm-block border">
    <nav class="navbar navbar-expand-lg navbar-light">
      <div class="container-fluid d-flex flex-column sidebar-sticky">
        <a class="navbar-brand d-none d-md-block" href="{% url 'seed_list' %} "><strong>projTree</strong></a>
        <div class="" id="navbarNav ">
          <ul class="navbar-nav d-flex flex-column">
            <li class="nav-item">
              <a class="nav-link active d-flex" aria-current="page" href="{% url 'seed_list' %} ">
                <img src="{% static 'seed/seed_list_icon.svg' %}" alt="alt">
                <p class="d-none d-md-block my-auto">Seeds</p>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="{% url 'posts' %} ">
                <img src="{% static 'seed/posts_icon.svg' %}" alt="">
                Posts
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                Pricing</a>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </div>
  <div class="contentPart col-md-8 col-sm-10 border">
    {% block content %}
    {% endblock %}
  </div>
  <div class="infoPart col-md-2 col-sm-0 border">
    <div class="search">
      <form class="d-flex flex-column row g-2 mt-1" method="POST" action="{% url 'search_seed' %} "> {% csrf_token %}
        <input class="form-control" type="search" placeholder="Search" aria-label="Search" name="searched">
        <button class="btn btn-outline-secondary" type="submit">Search</button>
      </form>
    </div>
    <div class="message">
      {% if messages %}
      {% for message in messages %}
      <div class="alert">
        {{message}}
      </div>
      {% endfor %}
      {% endif %}
    </div>
  </div>
</body>

4. 可选：优化侧边栏滚动条样式 #

.sidebar-sticky::-webkit-scrollbar {
  width: 6px;
}
.sidebar-sticky::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.1);
  border-radius: 3px;
}

方案有效性说明 #

sticky定位是relative和fixed的结合：元素在视口内时保持相对定位，滚动超出视口时切换为固定定位，不会脱离文档流，因此Bootstrap网格布局的宽度占位依然有效，内容区域不会左移重叠。设置height:100vh让侧边栏占满视口高度，overflow-y:auto保证侧边栏内容过长时可独立滚动，不影响主内容区域的滚动逻辑。

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