求助：使用sticky定位实现随图片滚动显示并跟随的描述文本

我想要实现一个图片搭配描述文本的布局：图片与描述采用flex布局并居中对齐，描述文本初始为隐藏状态，当用户滚动到图片区域时，描述文本变为可见。我用JavaScript实现了显示/隐藏的逻辑，但遇到了样式问题：当描述文本显示后，我想让它跟随滚动直到图片底部，尝试使用sticky定位却没能成功。以下是我的代码，求帮忙解决这个问题。

原代码 #

HTML #

<div>
  <div class="story3">
    <div class="container">
      <p id="hiddenText">Unleash new territories</p>
    </div>
    <img src="https://pixabay.com/photos/sea-ocean-coast-nature-boat-3352341/" alt="">
  </div>
  <div style="height: 100px;"></div>
</div>

<div class="scroll">
  <a href="">x2</a>
</div>

CSS #

.container {
  overflow-y: scroll;
  /* Enable vertical scrolling for the container */
}

.story3 {
  position: relative;
  top: 40rem;
  align-items: center;
  display: flex;
  justify-content: space-evenly;
  width: 100%;
}

#hiddenText {
  font-size: 2rem;
  position: sticky;
  top: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s;
}

.story3 img {
  width: 500px;
  height: 670px;
  position: relative;
}

.scroll {
  position: relative;
  top: 100rem;
}

JavaScript #

const hiddenText = document.getElementById('hiddenText');

window.addEventListener('scroll', () => {
  const windowHeight = window.innerHeight;
  const story3 = document.querySelector('.story3');
  const story3Top = story3.getBoundingClientRect().top;

  if (story3Top < windowHeight / 4) {
    hiddenText.style.opacity = 1;
  } else {
    hiddenText.style.opacity = 0;
  }
});

问题根源 #

sticky定位失效的核心原因是.container设置了overflow-y: scroll——sticky元素的父容器如果设置了非visible的overflow属性，会破坏sticky的定位逻辑，因为sticky需要相对于最近的无overflow限制的祖先元素（通常是视窗）生效。

具体修改 #

1. 修复CSS #

移除.container的overflow属性，同时让文本容器高度匹配图片，确保sticky能在图片滚动范围内生效：

.container {
  /* 移除overflow-y: scroll，恢复默认值 */
  height: 670px; /* 和图片高度保持一致 */
}

.story3 {
  position: relative;
  top: 40rem;
  align-items: flex-start; /* 改为顶部对齐，让文本容器和图片高度匹配 */
  display: flex;
  justify-content: space-evenly;
  width: 100%;
}

#hiddenText {
  font-size: 2rem;
  position: sticky;
  top: 20px; /* 调整top值，避免紧贴视窗顶部 */
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s;
}

.story3 img {
  width: 500px;
  height: 670px;
  position: relative;
}

.scroll {
  position: relative;
  top: 100rem;
}

2. 优化JavaScript逻辑 #

增加判断图片底部是否离开视窗，避免文本在图片完全滚出后仍显示：

const hiddenText = document.getElementById('hiddenText');
const story3 = document.querySelector('.story3');

window.addEventListener('scroll', () => {
  const windowHeight = window.innerHeight;
  const story3Rect = story3.getBoundingClientRect();
  const story3Top = story3Rect.top;
  const story3Bottom = story3Rect.bottom;

  // 图片顶部进入视窗1/4位置，且底部未完全离开视窗时显示文本
  if (story3Top < windowHeight / 4 && story3Bottom > 0) {
    hiddenText.style.opacity = 1;
  } else {
    hiddenText.style.opacity = 0;
  }
});

3. 修正图片链接（可选） #

原HTML中的图片链接是Pixabay的页面地址，不是直接图片链接，可替换为实际图片URL：

<img src="https://cdn.pixabay.com/photo/2018/03/17/19/36/sea-3234929_1280.jpg" alt="海边风景">

修改后，描述文本会在图片进入视窗时显示，并跟随滚动直到图片底部完全离开视窗时隐藏，sticky定位正常生效。

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