如何让元素在容器剩余高度大于指定值时保持sticky定位？

我需要定义一个元素，让它仅在容器剩余高度大于特定尺寸（我称之为sticky container margin）时，表现为sticky元素。比如，浅蓝色容器里的红色sticky元素，深蓝色线条代表sticky container margin：当容器开始滑出屏幕时，红色元素保持sticky状态，直到这条深蓝色线碰到容器底部，元素才会跟着向上移动。

以下是初始尝试代码：

初始代码 #

CSS #

section {
  height: 300lvh;
}

.content {
  background: #eee;
  height: 80lvh;
}

.box {
  height: 120lvh;
  background: #9f9;
  display: flex;
  flex-direction: column;
}

.sticky {
  position: sticky;
  top: 0px;
  height: 20lvh;
  background: #99f;
}

.end {
  color: red;
  padding-top: 50px;
}

.flex-end {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

HTML #

<section>
  <div class="content">Prev content</div>
  <div class="box">
    <div class="sticky">
      Sticky element
    </div>
    <div>
      Content
    </div>
    <div class="flex-end">
      Content
    </div>
  </div>
  <div class="content end">
    When this is visible, the sticky element should go up
  </div>
</section>

解决方案 #

核心思路是利用position: sticky的边界限制特性，通过给父容器添加对应尺寸的底部内边距，并给sticky元素设置bottom属性，精准控制元素的粘性生效范围。

修改后的代码如下：

调整后的CSS #

section {
  height: 300lvh;
}

.content {
  background: #eee;
  height: 80lvh;
}

.box {
  height: 120lvh;
  background: #9f9;
  display: flex;
  flex-direction: column;
  /* 设置为你的sticky container margin值 */
  padding-bottom: 50px;
  box-sizing: border-box;
}

.sticky {
  position: sticky;
  top: 0px;
  /* 与容器padding-bottom值保持一致 */
  bottom: 50px;
  height: 20lvh;
  background: #99f;
}

.end {
  color: red;
  padding-top: 50px;
}

.flex-end {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

HTML（无需修改） #

<section>
  <div class="content">Prev content</div>
  <div class="box">
    <div class="sticky">
      Sticky element
    </div>
    <div>
      Content
    </div>
    <div class="flex-end">
      Content
    </div>
  </div>
  <div class="content end">
    When this is visible, the sticky element should go up
  </div>
</section>

原理说明 #

• 给.box添加padding-bottom，相当于把容器的"有效滚动边界"向下延伸了对应尺寸，这个值就是你定义的sticky container margin。
• 给.sticky设置bottom属性，当容器的底部内边距区域进入视口时，sticky元素会被这个bottom值限制，不再保持top: 0的粘性状态，而是随容器一起向上滚动，正好实现"当sticky container margin到达容器底部时，元素停止粘性"的需求。
• 若需要调整margin大小，只需同步修改padding-bottom和bottom的数值即可。

内容的提问来源于stack exchange，提问作者Benjamín V