DEV Community

Saugat Rai
Saugat Rai

Posted on

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

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.

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?

Top comments (2)

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.

raisaugat profile image
Saugat Rai

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