如何实现粘性元素在页脚前停止且不拉伸父容器高度？

原代码的核心问题是：粘性元素位于红色div内部的文档流中，它的高度会被计入父容器的高度，导致红色div被拉长。要实现需求，必须让粘性元素脱离红色div的文档流，同时保留滚动到页脚前停止固定的效果。

方案1：纯CSS实现（推荐） #

将粘性元素移出红色div，作为同级元素，利用position: sticky的bottom属性控制停止位置，同时避免影响红色div的高度。

修改后的代码：

<div class="min-h-screen">
  <!-- 粘性元素：与红色div同级，脱离红色div文档流 -->
  <div class="bg-yellow-500 sticky top-[100px] bottom-[400px] h-[300px] w-[100px] ml-auto mr-[100px] z-10">
    <p>Div 2 (sticky)</p>
  </div>

  <!-- 红色背景内容区：高度仅由内部内容决定 -->
  <div class="bg-red-500">
    <div class="relative">
      <div class="bg-blue-500">
        <p>Div 1</p>
      </div>
      <div class="h-[900px] bg-green-500">Div 3 (content)</div>
    </div>
  </div>

  <!-- 页脚 -->
  <footer class="h-[400px] bg-black">
     <p class="text-white">footer</p>
  </footer>
</div>

<script src="https://cdn.tailwindcss.com"></script>

关键说明： #

• bottom-[400px]：值与页脚高度一致，确保滚动到页脚前，粘性元素停止固定，避免覆盖页脚。
• 粘性元素与红色div同级，因此它的高度不会被计入红色div的高度计算，红色div仅由内部的Div1和Div3撑开。
• z-10：保证粘性元素在视觉上位于红色div上方。

方案2：JS结合绝对定位实现（适合粘性元素必须在红色div内部的场景） #

如果粘性元素必须放在红色div内部，使用position: absolute让其脱离文档流，再通过JS监听滚动动态调整位置，实现粘性效果并在页脚前停止。

修改后的代码：

<div class="bg-red-500 h-[1200px] relative">
  <div class="relative">
    <div class="bg-blue-500">
      <p>Div 1</p>
    </div>
    <div class="h-[900px] bg-green-500">Div 3 (content)</div>
  </div>
  
  <!-- 粘性元素：绝对定位脱离文档流 -->
  <div id="stickyDiv" class="bg-yellow-500 h-[300px] w-[100px] absolute right-[100px] top-[100px] z-10">
    <p>Div 2 (sticky)</p>
  </div>
  
  <footer class="h-[400px] bg-black">
     <p class="text-white">footer</p>
  </footer>
</div>

<script src="https://cdn.tailwindcss.com"></script>
<script>
  const stickyDiv = document.getElementById('stickyDiv');
  const footer = document.querySelector('footer');
  const footerTop = footer.offsetTop;
  const stickyHeight = stickyDiv.offsetHeight;
  
  window.addEventListener('scroll', () => {
    const scrollTop = window.scrollY;
    // 计算粘性元素能到达的最低位置：页脚顶部 - 粘性元素高度
    const maxTop = footerTop - stickyHeight;
    // 动态调整top值：保持初始距离，同时不超过最低位置
    const currentTop = Math.max(100, Math.min(scrollTop + 100, maxTop));
    
    stickyDiv.style.top = `${currentTop}px`;
  });
</script>

关键说明： #

• position: absolute：让粘性元素脱离红色div的文档流，不再影响红色div的高度。
• 滚动监听逻辑：动态计算粘性元素的位置，确保滚动时保持固定距离，到达页脚前停止移动。

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