如何判断CSS position:sticky元素是否已固定在顶部或底部？

我需要给设置了position:sticky的元素在进入固定（stuck）状态时添加CSS类.is-stuck。目前顶部定位的场景已经实现，但底部定位的判断逻辑存在问题，推测需要结合元素高度处理，但不确定最优方案。同时需要支持非0值的偏移量（即top/bottom不为0的情况）。

原实现代码 #

HTML #

<main>
  <section>
    <br>
    
    <div id="one" class="sticky sticky-top">Top</div>
    
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    
    <div class="sticky sticky-bottom">Bottom</div>
    
    <br>
  </section>
  
  <section>
    <br><br><br><br>
    
    <div class="sticky sticky-top-offset">Top with offset</div>
    
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    
    <div class="sticky sticky-bottom-offset">Bottom with offset</div>
    
    <br><br><br><br>
  </section>
</main>

CSS #

.sticky               {
  position:sticky;
  background: #EEE;
  padding: .5rem;
  border: 1px solid #DDD;
  transition: all 200ms;
}
.sticky-top           { top:0; }
.sticky-top-offset    { top: 1rem;}
.sticky-bottom        { bottom: 0; }
.sticky-bottom-offset { bottom: 1rem; }

.is-stuck{
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.25);
  background: lightskyblue;
}

main{ display: flex; gap:.5rem;}
section{ height:120vh; width: 40%; }

JavaScript #

const stickyElements = [...document.querySelectorAll(".sticky")];
window.addEventListener("scroll", () => {
  stickyElements.forEach((el) => toggleClassIfStuck(el))
});
window.dispatchEvent(new Event('scroll')); //trigger initially

function toggleClassIfStuck(el){
  const computedStyles = getComputedStyle(el);

  if (this.canBeStuck(computedStyles)) {
    const hasTopPositionSet = computedStyles.top !== 'auto';
    const hasBottomPositionSet = computedStyles.bottom !== 'auto';

    if (hasTopPositionSet || hasBottomPositionSet) {
      el.classList.toggle('is-stuck', this.isStuck(el, computedStyles, hasBottomPositionSet))
    }
  }
}

function canBeStuck(computedStyles) {
  return computedStyles.display !== 'none' && computedStyles.position === 'sticky';
}

function isStuck(el, computedStyles, shouldUseBottomPosition) {
  const offsetParent = el.offsetParent; //the element which this element is relatively sticky to
  const rect = el.getBoundingClientRect();
  const parentRect = offsetParent.getBoundingClientRect();

  if (shouldUseBottomPosition) {
    //this isn't correct, but not sure what to check here!
    const elBottom = parseInt(computedStyles.bottom, 10);
    return rect.top - rect.bottom === elBottom;
  } else {
    const elTop = parseInt(computedStyles.top,10);
    return rect.top === elTop;
  }
}

修正方案 #

核心问题在于底部定位的isStuck判断逻辑错误，需要结合元素自身位置、视口边界和父容器范围来判断，同时要处理相对单位的转换。

修正后的JavaScript代码 #

const stickyElements = [...document.querySelectorAll(".sticky")];
window.addEventListener("scroll", () => {
  stickyElements.forEach((el) => toggleClassIfStuck(el))
});
window.dispatchEvent(new Event('scroll')); // 初始化触发一次

function toggleClassIfStuck(el){
  const computedStyles = getComputedStyle(el);

  if (canBeStuck(computedStyles)) {
    const hasTopPositionSet = computedStyles.top !== 'auto';
    const hasBottomPositionSet = computedStyles.bottom !== 'auto';

    if (hasTopPositionSet || hasBottomPositionSet) {
      el.classList.toggle('is-stuck', isStuck(el, computedStyles, hasBottomPositionSet))
    }
  }
}

function canBeStuck(computedStyles) {
  return computedStyles.display !== 'none' && computedStyles.position === 'sticky';
}

function isStuck(el, computedStyles, shouldUseBottomPosition) {
  const rect = el.getBoundingClientRect();
  const offsetParent = el.offsetParent;
  const parentRect = offsetParent.getBoundingClientRect();

  if (shouldUseBottomPosition) {
    // 解析bottom偏移量，转换为像素值
    const bottomOffset = parseFloat(computedStyles.bottom);
    const bottomOffsetPx = 
      computedStyles.bottom.includes('rem') 
        ? bottomOffset * parseFloat(getComputedStyle(document.documentElement).fontSize)
        : bottomOffset;
    
    // 元素底部距离视口底部等于偏移量，且未超出父容器顶部
    const isBottomStuck = Math.abs(rect.bottom - (window.innerHeight - bottomOffsetPx)) < 1;
    const isStillInParent = rect.top >= parentRect.top;
    return isBottomStuck && isStillInParent;
  } else {
    // 解析top偏移量，转换为像素值
    const topOffset = parseFloat(computedStyles.top);
    const topOffsetPx = 
      computedStyles.top.includes('rem') 
        ? topOffset * parseFloat(getComputedStyle(document.documentElement).fontSize)
        : topOffset;
    
    // 元素顶部距离视口顶部等于偏移量，且未超出父容器底部
    const isTopStuck = Math.abs(rect.top - topOffsetPx) < 1;
    const isStillInParent = rect.bottom <= parentRect.bottom;
    return isTopStuck && isStillInParent;
  }
}

关键修正点 #

• 单位转换：自动处理rem等相对单位，转换为像素值，避免偏移量判断错误。
• 底部定位逻辑：通过元素底部的视口坐标与「视口底部-偏移量」的位置对比，判断是否进入固定状态。
• 父容器边界校验：添加元素是否仍在父容器范围内的判断，避免元素完全移出后错误保留类名。
• 精度兼容：使用Math.abs(...) < 1替代严格相等，规避滚动时的像素精度偏差。

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