高度超出屏幕的侧边栏使用position:sticky时如何提前展示底部内容

问题原因 #

position: sticky元素的滚动范围由它的直接父元素决定：你当前代码中.sidebar是flex子项，默认align-self: stretch，高度和4000px高的主内容完全一致，sticky定位的.sidebar-content需要等整个4000px高的父容器完全滚动过视口后才会结束sticky状态，所以只有滚动到页面最底部才能看到侧边栏内容的底部。

解决方案 #

方案1：纯CSS实现（性能最优，无JS依赖）

如果接受侧边栏独立滚动，只需要修改.sidebar-content的CSS，增加最大高度限制和滚动属性，随时可以查看侧边栏底部内容：

.sidebar-content {
  margin: 5px;
  margin-bottom: 40px;
  background-color: LimeGreen;
  position: sticky;
  top: 0;
  /* 新增代码 */
  max-height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain; /* 避免滚动侧边栏带动页面滚动 */
}

方案2：JS实现（可精确控制滚动比例，符合页面滚动到50%显示侧边栏底部的需求）

不需要修改原有CSS，直接添加如下JS代码即可：

const sidebarContent = document.querySelector('.sidebar-content');
const mainContent = document.querySelector('.main-content');
// 页面总可滚动高度
const totalPageScroll = mainContent.offsetHeight - window.innerHeight;
// 侧边栏内容需要向上偏移的总高度（刚好露出底部的偏移量）
const totalSidebarOffset = sidebarContent.offsetHeight - window.innerHeight;

window.addEventListener('scroll', () => {
  const currentScroll = window.scrollY;
  // 计算滚动比例，页面滚动到总高度的50%时偏移量拉满
  const scrollRatio = Math.min(currentScroll / (totalPageScroll * 0.5), 1);
  // 动态设置top值控制侧边栏向上偏移
  sidebarContent.style.top = `-${scrollRatio * totalSidebarOffset}px`;
});

如果需要调整触发的滚动比例，修改代码中0.5的数值即可，比如改成0.3就是页面滚动到30%的位置就显示侧边栏底部。

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