粘性底部区块能否随页面全程联动滚动？

你的需求核心是突破原生position: sticky的默认限制，让右侧200%高度的列在滚动到页面底部后，向上滚动时能同步跟随页面移动，而不是停留在底部直到回到顶部200%位置。原生sticky无法直接实现这种自定义滚动逻辑，需要结合JavaScript监听滚动事件来动态控制元素定位。

实现思路 #

1. 基础布局：用Flex实现两列50%宽度的布局，左列设置700vh高度，右列初始设置position: sticky; bottom: 0
2. 滚动阶段判断：
   • 当页面未滚动到右列贴底的临界位置时，保持原生sticky行为
   • 当滚动到右列贴底后继续向下滚动，将右列改为固定定位，并通过transform控制其位置
   • 向上滚动时，根据滚动距离动态调整右列的transform值，实现同步联动
3. 临界值计算：通过窗口高度、列高度计算出滚动触发切换的阈值

完整代码实现 #

HTML结构

<div class="layout-container">
  <div class="left-column">左侧长内容区域</div>
  <div class="right-column" id="stickyRightCol">右侧粘性内容区域</div>
</div>

CSS样式

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.layout-container {
  display: flex;
  width: 100vw;
}
.left-column {
  width: 50%;
  height: 700vh;
  background-color: #f5f5f5;
}
.right-column {
  width: 50%;
  height: 200vh;
  background-color: #e8e8e8;
  position: sticky;
  bottom: 0;
  transition: transform 0.1s ease;
}
/* 固定底部状态 */
.right-column.fixed-bottom {
  position: fixed;
  bottom: 0;
}

JavaScript逻辑

const rightCol = document.getElementById('stickyRightCol');
const windowHeight = window.innerHeight;
const rightColTotalHeight = windowHeight * 2;
const leftColTotalHeight = windowHeight * 7;
// 临界滚动值：滚动到此处时，右列刚好贴底
const criticalScrollThreshold = leftColTotalHeight - rightColTotalHeight - windowHeight;

window.addEventListener('scroll', () => {
  const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;
  const currentScrollBottom = currentScrollTop + windowHeight;
  const maxScrollBottom = leftColTotalHeight;

  // 滚动到右列贴底后的区域
  if (currentScrollBottom >= maxScrollBottom - rightColTotalHeight) {
    // 计算超出临界位置的距离
    const overflowDistance = currentScrollBottom - (maxScrollBottom - rightColTotalHeight);
    // 动态调整右列位置，实现向上滚动时同步跟随
    rightCol.style.transform = `translateY(-${overflowDistance}px)`;
    rightCol.classList.add('fixed-bottom');
  } else if (currentScrollTop <= criticalScrollThreshold) {
    // 回到临界位置以上，恢复原生sticky行为
    rightCol.style.transform = '';
    rightCol.classList.remove('fixed-bottom');
  } else {
    // 中间滚动区域，保持sticky贴底
    rightCol.style.transform = '';
    rightCol.classList.remove('fixed-bottom');
  }
});

方案说明 #

• 原生sticky仅能在元素自身的容器范围内保持粘性，无法处理超出容器后的自定义滚动逻辑，因此必须通过JS介入
• 通过transform调整位置而非直接修改top/bottom属性，能保证滚动动画的流畅性，避免重排卡顿
• 临界值计算确保了滚动状态切换的准确性，覆盖了所有滚动场景

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