如何让元素随容器滚动且保留缩放动画效果？

核心问题在于position: fixed的元素始终相对于视口定位，无法跟随页面滚动；而绑定到父容器的定位方式会限制缩放后的元素范围。我们可以通过动态切换元素的定位方式并调整DOM结构来解决：

1. 调整DOM结构 #

将child元素从第一个section中移出，直接作为body的子元素，避免父容器的定位限制：

<body>
  <div id="myID" class="child hide"></div>
  <section class="one">
    <div class="parent"></div>
  </section>
  <section class="two"></section>
  <section class="three"></section>
</body>

2. 修改CSS样式 #

添加不同状态下的定位和样式，确保缩放后能跟随页面滚动：

* {
  padding: 0;
  margin: 0;
}

section {
  height: 100vh;
}

.one {
  background-color: greenyellow;
}

.two {
  background-color: orangered;
}

.three {
  background-color: aqua;
}

.parent {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  width: 274px;
  height: 154px;
  background: plum;
  z-index: 1;
  transition: all .5s ease;
  /* 默认隐藏，居中定位 */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.hide {
  opacity: 0;
}

.show {
  opacity: 1;
}

/* 缩放并切换为absolute定位，跟随页面滚动 */
.scale {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(4);
}

/* 滚动到第三区块时，让元素跟随滚动 */
.follow-scroll {
  position: absolute;
  top: 100vh; /* 定位到第二区块底部，跟随滚动到第三区块 */
  left: 50%;
  transform: translate(-50%, 0) scale(4);
  opacity: 1;
}

3. 优化滚动监听逻辑 #

合并滚动事件，用getBoundingClientRect()动态计算区块位置，避免硬编码数值，同时用classList管理样式类：

const childEl = document.getElementById("myID");
const sectionTwo = document.querySelector(".two");

function handleScroll() {
  const scrollY = window.scrollY;
  const viewportHeight = window.innerHeight;
  // 获取第二区块的位置信息
  const sectionTwoRect = sectionTwo.getBoundingClientRect();
  // 第二区块顶部进入视口的滚动位置
  const sectionTwoTop = scrollY + sectionTwoRect.top;
  // 第二区块中部的滚动位置
  const sectionTwoMiddle = sectionTwoTop + viewportHeight / 2;
  // 滚动到第三区块的位置
  const sectionThreeTop = sectionTwoTop + viewportHeight;

  // 显示/隐藏child
  if (scrollY >= 1) {
    childEl.classList.add("show");
    childEl.classList.remove("hide");
  } else {
    childEl.classList.add("hide");
    childEl.classList.remove("show");
  }

  // 滚动到第二区块中部，缩放并切换定位
  if (scrollY >= sectionTwoMiddle && scrollY < sectionThreeTop) {
    childEl.classList.add("scale");
    childEl.classList.remove("follow-scroll");
  } 
  // 滚动到第三区块，让元素跟随滚动
  else if (scrollY >= sectionThreeTop) {
    childEl.classList.add("follow-scroll");
    childEl.classList.remove("scale");
  } 
  // 回到第一区块，恢复fixed定位
  else {
    childEl.classList.remove("scale", "follow-scroll");
  }
}

window.addEventListener("scroll", handleScroll);

关键修改说明 #

• DOM结构调整：将child移出父容器，避免父容器的overflow: hidden或定位限制，让它能自由切换定位方式。
• 动态切换定位：在第一区块用fixed居中显示；第二区块中部切换为absolute并缩放，此时元素相对于body定位，能跟随页面滚动；进入第三区块时调整top值，让元素跟着滚动到第三区块。
• 动态计算滚动位置：用getBoundingClientRect()获取区块位置，替代硬编码的729，适配不同屏幕尺寸。
• classList管理样式：避免直接替换className导致样式冲突，更灵活地添加/移除状态类。

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