How do you make an HTML element transition seamlessly across pages like Stack Overflow’s top bar?

When you move from one page to another on a website, some of the content disappears briefly before being replaced by the contents of the new page. But other elements seem not to be affected at all. For example when navigating this website (Stack Overflow), across pages, the top bar div doesn’t flinch.

How can this effect be achieved? Preferably with vanilla HTML, CSS and JS. Can it be done without combining all the pages into one file?

How did Stack Overflow do it with their top bar?