javascript - 如何使粘性 div 响应浮动（位置：固定）div？

Question

我正在使用 Material UI 的<Appbar />组件，它编译为一个位置为：fixed; 的 div。这里的“滚动隐藏”效果使用visibility: hidden;和transform: translateY(-59px);隐藏栏。

现在，我想在这个<Appbar />组件下添加一个粘性 div，但结果是粘性 div 不受<Appbar />DOM 流中的影响。所以，本质上，它只是向上滚动到顶部（在 下方或上方<Appbar />，取决于 z 索引），然后像它应该的那样粘住。

我知道这position: fixed;会删除文档中的元素自然空间并使其“浮动”，所以我想这就是粘性 div 不响应它的原因。

我想要的是粘性 div 将其保持在 下方<Appbar />，并且当<Appbar />消失时粘性 div 会相应地移动其在文档中的位置。谁能在这里给我小费？

在此处查看沙箱： https ://codesandbox.io/s/quiet-fast-pb9fv?file=/src/HideAppBar.js

标签： javascriptcssreactjsmaterial-uigatsby

Answer 1

在这种情况下，您遵循“合气道原则”，不要为停止效果而挣扎，而是让它发生并利用它。我的意思是，如果它一直向上滑动，让它一直向上滑动，让它看起来好像没有。这可以通过多种方式实现。给它一个容器和一个padding-top（所以碰到边缘的部分是透明的），或者给它一个margin-top（几乎相同）。如果它覆盖了下面的东西，你可以用pointer-events:none它来点击它。

我确信您已经有了正确的想法，而无需显示您的代码。但是，是的，上面的评论是对的：如果我们看到您所看到的，我们可以提供更多帮助。

这篇文章实际上是一个评论，我只需要格式。