Navbar positioning

We want the navbar to be big on page load to make the site feel big, but collapse to a smaller size on scroll to get out of the way.

This poses an issue of performance when the height of the scrollbar is animated. When the navbar is part of the normal document flow and made sticky with position: sticky, the height animation is janky, because the whole page layout is recalculated.

To fix this, we could take the navbar out of the document flow with position: fixed. But then navbar the appears on top of and overlaps the content. That we can fix by adding padding to the top of the page with the same size as the navbar. This requires JavaScript to measure the height of the navbar and apply it to the body. But then we have the problem that during load of the page, the content jumps from it's initial state under the navbar to below the navbar once the JavaScript has executed. This last problem we can fix by also setting the position: fixed after the JavaScript has executed.

So our logic will go something like this:

1. The page is loaded. Navbar is positioned statically so content appears regularly below. If JavaScript loading would fail for some reason, the styling would be intact; only the navbar would not be fixed to the top.
2. The JavaScript executes, positions the navbar as fixed, measures the height of the navbar and adds this as top padding to the body to prevent the navbar from overlaying the content.

Note: It's hard to showcase this in a little demo here on the page because position: fixed is always in reference to the document. So the demo has position: absolute on the navbar instead of fixed, so contrary to the application on the actual website, the navbar in the demo does not stick to the top of the container as it does. The concepts still apply.