基于Bootstrap 5的动态高度Sticky侧边栏（含固定头尾）实现问询

需求说明 #

需要基于Bootstrap 5网格系统实现一个position:sticky侧边栏，满足以下要求：

• 侧边栏的头部（header）和底部（footer）始终可见
• 侧边栏中间内容区域支持滚动
• 适配高度可变的全局头部，实现两种滚动状态效果：
  1. 页面在顶部时，侧边栏填满对应内容区域，中间内容可滚动
  2. 页面滚动、全局头部滚出视野后，侧边栏填满所在列的高度

核心实现方案 #

利用Bootstrap 5的Flex布局+Sticky定位，结合JavaScript动态适配全局头部高度，具体代码如下：

HTML结构 #

<!-- 可变高度全局头部 -->
<header class="global-header bg-light py-4">
  <div class="container">
    <h1>可变高度全局头部</h1>
    <p>此处内容高度可动态变化，比如展开/折叠的导航栏</p>
  </div>
</header>

<!-- Bootstrap 5网格布局主体 -->
<div class="container my-4">
  <div class="row">
    <!-- 主内容区（模拟长页面） -->
    <main class="col-lg-8">
      <div class="p-4 bg-light mb-3">主内容区块 1</div>
      <div class="p-4 bg-light mb-3">主内容区块 2</div>
      <div class="p-4 bg-light mb-3">主内容区块 3</div>
      <div class="p-4 bg-light mb-3">主内容区块 4</div>
      <div class="p-4 bg-light mb-3">主内容区块 5</div>
      <div class="p-4 bg-light mb-3">主内容区块 6</div>
      <div class="p-4 bg-light mb-3">主内容区块 7</div>
      <div class="p-4 bg-light mb-3">主内容区块 8</div>
    </main>

    <!-- Sticky侧边栏 -->
    <aside class="col-lg-4">
      <div class="sticky-sidebar h-100 d-flex flex-column">
        <!-- 侧边栏头部（固定） -->
        <div class="sidebar-header p-3 bg-primary text-white">
          <h5>侧边栏头部</h5>
        </div>
        <!-- 可滚动内容区 -->
        <div class="sidebar-content flex-grow-1 overflow-y-auto p-3">
          <p>可滚动内容项</p>
          <p>可滚动内容项</p>
          <p>可滚动内容项</p>
          <p>可滚动内容项</p>
          <p>可滚动内容项</p>
          <p>可滚动内容项</p>
          <p>可滚动内容项</p>
          <p>可滚动内容项</p>
          <p>可滚动内容项</p>
          <p>可滚动内容项</p>
          <p>可滚动内容项</p>
          <p>可滚动内容项</p>
        </div>
        <!-- 侧边栏底部（固定） -->
        <div class="sidebar-footer p-3 bg-dark text-white">
          <h5>侧边栏底部</h5>
        </div>
      </div>
    </aside>
  </div>
</div>

CSS样式 #

/* 全局头部基础样式 */
.global-header {
  min-height: 80px;
}

/* Sticky侧边栏核心样式 */
.sticky-sidebar {
  position: sticky;
  /* 用CSS变量存储动态计算的头部高度 */
  top: var(--header-height);
}

/* 移动端适配：全局头部固定时，侧边栏top值设为0 */
@media (max-width: 991px) {
  .sticky-sidebar {
    top: 0;
  }
}

JavaScript（适配可变头部高度） #

// 计算并更新全局头部高度的CSS变量
function updateHeaderHeight() {
  const header = document.querySelector('.global-header');
  const headerHeight = header.offsetHeight;
  document.documentElement.style.setProperty('--header-height', `${headerHeight}px`);
}

// 页面加载、窗口尺寸变化时更新头部高度
window.addEventListener('load', updateHeaderHeight);
window.addEventListener('resize', updateHeaderHeight);

// 滚动监听：动态调整侧边栏top值
window.addEventListener('scroll', () => {
  const header = document.querySelector('.global-header');
  const stickySidebar = document.querySelector('.sticky-sidebar');
  const headerTop = header.getBoundingClientRect().top;

  if (headerTop <= 0) {
    // 全局头部滚出视野，侧边栏贴顶
    stickySidebar.style.top = '0';
  } else {
    // 头部在视野内，侧边栏与头部底部对齐
    stickySidebar.style.top = `${header.offsetHeight}px`;
  }
});

关键要点说明 #

1. Flex布局适配内部结构：通过d-flex flex-column和flex-grow-1让侧边栏的头部、滚动区、footer自动分配空间，滚动区占满剩余高度并支持滚动
2. 动态top值适配可变头部：用CSS变量结合JavaScript实时计算全局头部高度，解决头部高度变化的问题
3. 滚动状态切换：通过监听滚动事件判断头部是否在视野内，动态调整侧边栏的top值，实现两种状态的无缝切换

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