html - div 在其他 div 内，相对于滚动向下移动( react )

Question

我想在向下滚动页面时让一个物体从天而降。这个想法是:你有 object div 不动。它应该位于页面的中心(距其父页面顶部 50 像素)，当您向下滚动时它也应该向下滚动。

有什么问题？ object 在另一个 div 中。我只希望 object 在此 div 中可见。所以不在整个网站上。

我尝试了什么？ 1: 固定定位，但随后显示在整个页面，z-index 不适用于fixed。 2: Relative 定位在 parent 上，absolute 定位在 child 上，然后是 object div 在我滚动时不会向下滚动页面。

视觉呈现::

向下滚动时:

react 组件:

<div className="container">
      <div className="container--object">
          <img src={object}/>
      </div>
</div>

CSS

.container {
  min-height: 100vh;
  position: relative;
}

.container--object {
  position: absolute;
  top: 50px;
}

我的父组件是主页。而这个 React 组件的 siblings 是其他 div 的。使 div 向下移动页面的功能是我正在努力解决的问题，如何将 object div 向下移动？有没有办法让它脱离浏览器的顶部？

Answer 1

好的，如果我没理解错的话，你想要这样的东西吗？我使用了一张图片和一些测试文本

.container {
  min-height: 100vh;
  height: 2500px;
  position: relative;
}

.container_object {
  position: fixed;
  top: 50px;
}

<div class="container">
      <div class="container_object">
          <img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
      </div>
      <div style="position: absolute; top:500px">
        TEEEEEEEEEEEEST 111111111
      </div>
      
      <div style="position: absolute; top:800px">
        TEEEEEEEEEEEEST 222222222
      </div>
</div>

你应该在整页中看到这个片段