如何计算粘性容器从开始粘接到停止粘接的滚动距离？

你的问题出在没考虑粘性容器自身的高度，而且错误地用vh转px的方式计算父元素高度，忽略了DOM元素实际高度的准确性。我们一步步来修正：

问题根源 #

你之前计算的是section的总高度（250vh转成的1690px），但position: sticky元素的固定范围是在其父元素内部——当父元素的底部滚动到粘性容器的顶部位置时，粘性容器就会停止固定，跟随父元素一起滚动。如果直接滚动到section的总高度位置，粘性容器早就被推出视口了，这就是你看到的问题。

正确计算方法 #

我们要基于DOM元素的实际高度来计算，而不是依赖vh转px（后者会忽略元素的内边距、边框等，视口变化时也会有误差）：

1. 获取父元素（section）的实际高度：用offsetHeight获取包含内边距、边框的总高度
2. 获取粘性容器的实际高度：同样用offsetHeight获取其自身高度
3. 计算停止固定的滚动距离：父元素总高度减去粘性容器的高度，就是粘性容器从开始固定到停止固定的滚动距离

代码示例 #

// 获取DOM元素
const section = document.querySelector('section');
const stickyContainer = document.querySelector('.sticky');

// 计算各部分高度
const sectionTotalHeight = section.offsetHeight;
const stickyHeight = stickyContainer.offsetHeight;

// 正确的滚动距离
const stickyEndScrollDistance = sectionTotalHeight - stickyHeight;

console.log('粘性容器停止固定的滚动距离：', stickyEndScrollDistance);

为什么这样计算？ #

当你滚动到stickyEndScrollDistance这个值时，粘性容器的底部会刚好和section的底部对齐。此时继续滚动，section的底部开始离开视口，粘性容器就无法再保持在视口顶部，会跟随section一起向上滚动，逐渐离开视口。

额外验证（可选） #

你可以通过监听滚动事件来验证这个值是否正确：

window.addEventListener('scroll', () => {
  const scrollTop = window.scrollY || document.documentElement.scrollTop;
  const stickyRect = stickyContainer.getBoundingClientRect();
  
  // 当粘性容器的顶部不再等于0时，说明它已经停止固定
  if (stickyRect.top !== 0) {
    console.log('实际停止固定的滚动距离：', scrollTop);
  }
});

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