1

I am trying to have multiple sticky headers under each other.

I currently have a navigation bar positioned to stick to the top of the page. If a component has its own additional navigation for this particular component (e.g. edit, export), I would like it to stick to the top, but beneath the app navigation.

I tried an approach similar to How can I make multiple on scroll fixed headers/navbars that stick at the very top of the page?, but it did not work out.

Here's a schema of what the structure is like (ignore the margin/padding between the boxes - they are just there to clarify the component structure).

App-/Component-View

Is it possible to stick the "Component-specific navigation bar" right beneath the "App-specific navigation bar" once the "Component frame" contains a component, which does have such an additional navigation bar at all? Would I need to calculate the height of the "App-specific navigation bar" using JavaScript?

Ultimately I'd need this in React, but if I understood how it can be done, I probably could implement it myself.

Voronin
  • 159
  • 1
  • 7
  • see this [answer](https://stackoverflow.com/a/60040307/14522591) could help – antoineso Apr 12 '21 at 15:55
  • @antoineso thank you! My problem is I do not know the height of the navigation bars and they might become higher if the window / page is shrunk in width. That's where I'd have to calculate, I suppose? – Voronin Apr 12 '21 at 15:57
  • Could you place all the headers inside one div that is sticky, and then manipulate individual headers within that div? *If I understand your question that would have the same end result, but would be somewhat easier to do.* – cssyphus Apr 12 '21 at 15:59
  • @cssyphus I am afraid this would be difficult, because I am using routers to switch between individual components and they all are rendered into one "main" div whereas the sticky navigation is rendered above this "main" div. I believe, that adding / removing a navigation in the navigation div **and** switching the component inside the "main" div could quickly become too complicated, too. – Voronin Apr 12 '21 at 16:02
  • @Voronin: You said `if the window / page is shrunk in width` so does that mean that you are using `vh` and `vw`? If so, that could mean that instead of pixels you can use those two measurements in [the answer antoineso suggested](https://stackoverflow.com/a/60040307). – Lakshya Raj Apr 12 '21 at 16:37
  • @LakshyaRaj when the page / web browser window is shrunk, the contents becomes smaller and might "jump" into the next line. Same goes for the navigation. This makes it difficult to set the `top`-attribute of the second navigation bar, because it's e.g. only `50px` if all the contents fits into one line, but might become `100px` if the content exceeds one line. I am afraid viewport sizes will not help me here, because the second navigation bar top depends on the first navigation bar's height. – Voronin Apr 12 '21 at 21:21
  • @Voronin: Oh, so I misunderstood what you meant by the page height changing. This seems trickier than I thought... – Lakshya Raj Apr 12 '21 at 21:22
  • I have the same problem, any solution? I don't know how to set the `top` property dynamically according to the first header – JPocoata Jan 10 '22 at 22:10
  • @JPocoata Sorry, we ended up changing the design so that it would only have one panel at the top - and made that sticky. There are ways (using e.g. JavaScript) to have a reactive property of clientHeight of that panel and manually adjust the height, but I believe it's pretty cumbersome to implement, which is why we dropped that. – Voronin Jan 11 '22 at 12:15

0 Answers0