DEV Community

loading...

How do you compensate the space that fixed header takes place in react?

Saugat Rai
Been working with frontend stuff and lately more into React
・1 min read

Let's say there is fixed header component that has two or more component. The component has it's own rendering function. Some may render earlier while some may render later.

If header has two component
Alt Text

If header has only one component
Alt Text

Below the header component, there is section that renders list of information. Since the header is fixed, the list component has to be given certain top value in order for it to be placed just below fixed header component.

How can one manage the top value for list regarding that the fixed container can have 1 or more component render?

The solution I have come up is this.
Image

This will grab the total height the fixed container takes and store it in css variable which will then be access by list component.
But the problem here is that it is one time only. If certain component render few seconds later, it won't add that component height.

Any suggestions on how can this be changed or updated?

Discussion (2)

Collapse
alexparra profile image
Alex Parra

have you tried position sticky instead of fixed?
Fixed position removes the element from the document flow while (if I’m not mistaken) sticky does not.
Which means the “space” it occupies is always there thus keeping subsequent elements in the right place.

Another option might be flex column on the wrapper with scrolling on the main area. But this needs some tweaks to scrolling overflow.

Collapse
raisaugat profile image
Saugat Rai Author

Yes, tried it and it worked smoothly. But is there any other alternatives also?
Thank you for the suggestions. :)