如何实现元素底部进入视口时的position sticky粘性定位？

现有代码中，.child元素通过position: sticky; top: 0实现的是顶部进入视口时触发粘性定位，但需求改为：当.child的底部（即内部的BOTTOM标题）进入视口时，才让.child变为粘性定位。下面提供两种可行方案：

方案一：纯CSS实现（固定高度场景） #

因为你的.child高度固定为150vh，视口高度为100vh，可以通过计算差值设置top值调整触发时机：

修改.child的CSS代码：

.child{
  width: 80%;
  height: 150vh;
  background-color: orange;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  position: sticky;
  /* 计算触发时机：视口高度 - 元素高度 = 100vh - 150vh = -50vh */
  top: -50vh;
}

原理：当滚动到.child的底部刚好对齐视口顶部时，.child的顶部距离视口顶部的距离正好是-50vh，此时触发粘性定位，元素会固定在该位置，直到父容器.box完全离开视口。

方案二：JavaScript动态计算（适配动态高度场景） #

如果.child高度不固定，或者需要更灵活的控制，可以通过监听滚动事件动态判断：

步骤1：修改CSS，新增粘性类 #

.child{
  width: 80%;
  height: 150vh;
  background-color: orange;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  /* 移除原有的sticky和top属性 */
}
.sticky{
  position: sticky;
  /* 保持元素底部对齐视口顶部 */
  top: calc(100vh - 100%);
}

步骤2：添加JavaScript逻辑 #

// 获取所有.child元素
const childElements = document.querySelectorAll('.child');

// 监听滚动事件
window.addEventListener('scroll', () => {
  childElements.forEach(child => {
    // 获取元素相对于视口的底部位置
    const childBottom = child.getBoundingClientRect().bottom;
    // 判断元素底部是否进入视口
    if (childBottom <= window.innerHeight) {
      child.classList.add('sticky');
    } else {
      child.classList.remove('sticky');
    }
  });
});

// 初始化时触发一次，避免初始状态异常
window.dispatchEvent(new Event('scroll'));

原理：通过getBoundingClientRect()获取元素相对于视口的位置，当元素底部进入视口时添加粘性类触发定位，反之移除类取消粘性。

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