如何实现粘性侧边栏触达容器底部时收缩并支持滚动？

不需要JS或IntersectionObserver，仅靠HTML和CSS就能完成需求，具体实现分两种情况：

场景1：页脚高度固定 #

这种情况最简单，直接通过固定定位+媒体查询+calc就能实现：

HTML结构 #

<div class="page">
  <main class="main">
    <aside class="sidebar">
      <!-- 侧边栏内容 -->
    </aside>
    <section class="content">
      <!-- 长内容区域 -->
    </section>
  </main>
  <footer class="footer">
    <!-- 页脚内容 -->
  </footer>
</div>

CSS实现 #

/* 全局布局：页脚占自适应高度，main占剩余视口空间 */
.page {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
  margin: 0;
}

.main {
  display: flex;
  overflow-x: hidden;
}

.content {
  flex: 1;
  padding-left: 260px; /* 给侧边栏留出空间 */
}

/* 默认状态：侧边栏固定在视口顶部，高度满视口 */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 250px;
  height: 100vh;
  overflow-y: auto; /* 侧边栏内容过长时自身滚动 */
}

/* 当视口高度不足以容纳满高侧边栏+固定高度页脚时，收缩侧边栏高度 */
/* 假设页脚高度为80px，侧边栏内容最小高度为500px，总阈值为580px */
@media (max-height: 580px) {
  .sidebar {
    height: calc(100vh - 80px); /* 减去页脚高度，限制在main容器范围内 */
  }
}

场景2：页脚高度动态变化 #

如果页脚高度不固定（比如内容会动态增减），纯CSS无法直接获取页脚的实时高度，这时候需要一行简单的JS代码来动态计算侧边栏的最大高度：

补充JS代码 #

// 获取页脚高度并设置CSS变量
const footerHeight = document.querySelector('.footer').offsetHeight;
document.documentElement.style.setProperty('--footer-height', `${footerHeight}px`);

// 如果页脚内容可能动态变化，监听变化重新计算
const observer = new MutationObserver(() => {
  const newHeight = document.querySelector('.footer').offsetHeight;
  document.documentElement.style.setProperty('--footer-height', `${newHeight}px`);
});
observer.observe(document.querySelector('.footer'), { childList: true, subtree: true });

对应的CSS调整 #

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 250px;
  height: 100vh;
  overflow-y: auto;
  /* 动态限制最大高度 */
  max-height: calc(100vh - var(--footer-height, 0px));
}

/* 也可以结合媒体查询，只在小视口时启用限制 */
@media (max-height: 600px) {
  .sidebar {
    height: calc(100vh - var(--footer-height, 0px));
  }
}

核心原理 #

• 默认状态用position: fixed让侧边栏固定在视口顶部，高度占满视口，内容过长时自身滚动。
• 小视口下通过calc(100vh - 页脚高度)限制侧边栏高度，确保它不会覆盖页脚，同时保留自身滚动能力。
• 动态页脚场景仅需少量JS监听高度变化，无需复杂的IntersectionObserver逻辑。

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