I have been utilizing Material UI's <Appbar /> component, which is rendered as a div with position: fixed;. The effect of the bar hiding on scroll employs visibility: hidden; and transform: translateY(-59px);.
Now, my goal is to include a sticky div beneath this <Appbar /> component. However, the issue arises when the sticky div does not interact with the <Appbar /> within the DOM structure. Essentially, it merely scrolls up to the top (below or above the <Appbar />, depending on the z-index), and then becomes sticky, as expected.
I understand that employing position: fixed; eliminates the element's natural document space, causing it to "float". This might explain why the sticky div fails to respond accordingly.
My desired outcome is for the sticky div to maintain its position below the <Appbar />, and adjust its placement in the document once the <Appbar /> disappears. Any suggestions or tips on how to achieve this?
To view a sandbox example, click the link below: https://codesandbox.io/s/quiet-fast-pb9fv?file=/src/HideAppBar.js