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

Question

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

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

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

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

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

Answer 1

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

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

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