使用CSS position:sticky时图片底部部分被遮挡的问题如何解决

position: sticky 元素的滚动活动范围被限制在其直接父元素的高度区间内，当图片高度超过视口高度时，父容器高度如果仅等于视口高度，图片吸附到顶部后剩余的底部内容没有对应的滚动空间可以展示，就会出现截断。

方案1：调整sticky父容器的高度 #

• 原理：position: sticky 元素只会在父元素的可视范围内保持吸附状态，扩大父容器高度即可拉长图片的滚动活动区间
• 操作：将包裹图片的父容器高度设置为图片实际高度 + 你期望的重叠吸附滚动偏移量，确保图片从吸附到顶部开始，还能有足够的滚动距离展示完整内容，示例代码结构：

/* 图片的直接父容器 */
.sticky-img-wrapper {
  /* 例如图片高度为1200px，视口高度为800px，这里至少设置1200px，需要保留重叠效果可额外增加对应数值 */
  height: 1400px;
  position: relative;
}
/* sticky定位的图片 */
.sticky-img {
  position: sticky;
  top: 0;
  width: 100%;
  height: auto;
}

方案2：动态调整sticky的top阈值适配长图 #

• 原理：当图片高度大于视口高度时，不固定吸附在top:0位置，允许图片顶部先随滚动移出视口，直到图片底部对齐视口底部后再开始吸附
• 操作：用calc动态计算top值，公式为 top: calc(100vh - 图片高度)，响应式场景可以搭配JS动态更新数值：

.sticky-img {
  position: sticky;
  /* 示例：图片高度1200px，视口高度800px，计算后top=-400px，图片会先向上滚动400px直到底部贴住视口底部再进入吸附状态 */
  top: calc(100vh - 1200px);
  width: 100%;
}

响应式适配JS代码：

function updateStickyTop() {
  const stickyImgs = document.querySelectorAll('.sticky-img')
  stickyImgs.forEach(img => {
    img.style.top = `calc(100vh - ${img.offsetHeight}px)`
  })
}
// 页面加载和窗口尺寸变化时触发更新
window.addEventListener('load', updateStickyTop)
window.addEventListener('resize', updateStickyTop)

方案3：小屏视口下回退到流式布局 #

如果不需要在小高度视口下保留sticky效果，可以加媒体查询直接取消吸附定位，避免内容截断：

/* 当视口高度小于800px时取消sticky定位 */
@media (max-height: 800px) {
  .sticky-img {
    position: static;
  }
}

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