Loading Admin Toolbar in header not Footer to Scroll it with page

I’m trying to load the admin toolbar on the front end immediately after the head tag in my header.

I’m trying to achieve something like this as opposed to how it usually gets loaded at the end of the page.

<header>
<div id="wpadminbar" class="show-wp-toolbar" role="navigation">...</div>
<nav>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/blog/">Blog</a></li>
</ul>
</nav>
</header>

I want the menu bar to flow naturally with the rest of the page instead of being fixed so when I scroll up it hides with everything else.

I’ve found the admin bar gets loaded in “wordpress/wp-settings.php” on line 146:

   require( ABSPATH . WPINC . '/admin-bar.php' );

And admin bar itself is at:

   wordpress/wp-includes/class-wp-admin-bar.php 
   wordpress/wp-includes/admin-bar.php

However, I’m new at PHP and have had trouble figuring out how the order of page elements is determined.