我正在使用 Material UI 的 <Appbar /> 组件，这会编译为一个带有 position: 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