Fixed positioning causes layout shift

Aug 6, 2025

I recently built a fixed movable navbar at Mastra. It had an interesting mask effect that I will write about soon, so that as you moved the navbar, you see what was behind it.

It worked as expected except for one problem. Everytime I refreshed, the navbar caused the page to jump to a random section. There were a couple of internal page links and each refresh auto-scrolled the page to that section. It was jarring.

The reason for the bug was the layout of my html.

Here is how it was setup:

<body>
  <div>
      <FixedNav/>
      <OtherContent/>
  </div>
</body>

The fix was to take the nav out of the container for the rest of the content and move it to the body

<body>
  <FixedNav/>
  <div>
    <OtherContent/>
  </div>
</body>

This wasn't immediately obvious to me as I spent a couple of minutes figuring out why the fixed positioning was breaking things.

I guess that's what the Portal element is useful for.

Next time I run into this same problem, this will be handy.

Thanks to Dayo for the tip.