div 在其他 div 中，相对于滚动向下移动（反应）

Posted 2023-03-06

【中文标题】div 在其他 div 中，相对于滚动向下移动（反应）

【英文标题】：div inside other div, moving down in relation to scroll (React)

【发布时间】：2020-01-31 17:46:37

【问题描述】：

我希望在向下滚动页面时有一个物体从天而降。这个想法是：你有object div 不动。它应该位于页面的中心（距离其父级顶部 50 px），当您向下滚动时，它也应该向下滚动。

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

我尝试了什么？ 1： 固定定位，但随后在entire page 上显示，z-index 不适用于fixed。 2： Relative 定位在 parent 和 absolute 上，但是当我滚动时 object div 不会向下滚动。

视觉表现：：

向下滚动时：

反应组件：

<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;

我的父组件是主页。而这个反应组件的siblings 是其他div's。使 div 向下移动页面的功能是我正在努力解决的问题，我怎样才能将 object div 向下移动？有没有办法让它基于浏览器的顶部？

【问题讨论】：

你能告诉我们你在代码方面的尝试吗？

您应该发布您尝试使用的代码的最小可重现示例

@LouisDurand 我粘贴了我正在使用的代码，我一直在努力删除很多代码。这就是我现在所拥有的，因此我需要找到一种方法来在滚动时移动object 的top 值。

@alesssz 是的，对不起，我有这么少，它没有做太多，但它添加了它。

@Otto 所以你希望 div 保持静止。那么当页面向下滚动时，无论您如何向下滚动，div 都应该始终保持在距顶部 50px 的位置？

【参考方案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>

你应该在整页中看到这个 sn-p

【讨论】：

它接近我想要的。我面临的问题是object div 显示在整个网站上。不仅限于container div。

好的...以某种方式将container-object 上的z-index 更改为-1 有效。以前没有，现在有！！谢谢！

我现在唯一的问题是container 中的其他 div 不再可点击。就像按钮一样，尽管它们出现在我的 object div 上方。

基本上，如果我向container 添加背景，我需要将其z-index 更改为-2，否则object div 会出现在它后面。但它也使我在container 中的所有项目无法在hover 或click 上使用。因为它有一个否定的z-index

如果我保留容器 1 的 z-index，然后保留对象 2 的 z-index。然后它可以工作，但是我的对象 div 再次在整个站点上可见。跨度>