0

I'm using Material UI's <Appbar /> component, and this compiles to a div with position: fixed;. The "scroll to hide" effect here uses visibility: hidden; and transform: translateY(-59px); to hide the bar.

Now, I would like to add a sticky div under this <Appbar /> component, but what happens is that the sticky div is not affected by the <Appbar /> in the DOM flow. So, essentially, it just scrolls up to the top (under or over the <Appbar /> , depending on the z-index), and then sticks, like it should.

I understand that position: fixed; removes the elements natural space in the document and makes it "floating", so I guess this is the reason the sticky div does not respond to it.

What I would like is that the sticky div keeps it place under the <Appbar />, and when the <Appbar /> disappears the sticky div shifts its position in the document accordingly. Anyone who can give me a tip here?

See a sandbox here: https://codesandbox.io/s/quiet-fast-pb9fv?file=/src/HideAppBar.js

Arne Pedersen
  • 89
  • 4
  • Without seeing your code - rendered HTML/CSS - we cannot help you. Please read [how to create a minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example). – disinfor Dec 27 '20 at 20:10
  • 1
    Does this answer your question? [Fixed position div on top vertical space](https://stackoverflow.com/questions/31311323/fixed-position-div-on-top-vertical-space) – Louys Patrice Bessette Dec 27 '20 at 20:10
  • In the above suggested duplicate, it is about a fixed div at the bottom... But the logic is the same anyway. Just add some margin-top... – Louys Patrice Bessette Dec 27 '20 at 20:12

1 Answers1

0

In such cases, you follow the "aikido principle" and don't struggle with stopping the effect but let it happen and make use of it. I mean, if it slides all the way up, let it slide all the way up and make it look like it didn't. This can be achieved several ways. Give it a container and a padding-top (so the part hitting the edge would be transparent), or give it a margin-top (which is almost the same). If it's covering something underneath, you can use pointer-events:none to make it click-thru.

I'm sure you already have the right idea without having to show your code. But yes, commenters above are right: we can help a lot more if we see what you see.

This post is practically a comment, I just needed the formatting.

dkellner
  • 8,726
  • 2
  • 49
  • 47
  • Thanks for the advice, but unfortunately, that didn't solve my problem. 'marginTop' actually just pushes the sticky div further down initially, then the div slides all the way up (since 'top: 0') when you scroll. Basically I want all content on the page to stop at the top when the bar is shown, so I guess I have to make a custom appbar or see if I somehow can override the native "position: fixed" on it. – Arne Pedersen Dec 28 '20 at 20:54