<header class="centered">
  Header markup goes here
</header>
<div id="main_content">
  Content goes here
</div>
<div id="nav_bar">
  Navigation goes here
</div>

I used CSS to position the navigation absolutely in between the header and the main content, and then wrote a small amount of jQuery to do the rest.

$(document).ready(function() {
	var yOffset = $("#nav_bar").offset().top;
	$(window).scroll(function() {
		if ($(window).scrollTop() > yOffset) {
			$("#nav_bar").css({
				'top': 0,
				'position': 'fixed'
			});
		} else {
			$("#nav_bar").css({
				'top': yOffset + 'px',
				'position': 'absolute'
			});
		}
	});
});

This piece of JavaScript starts by finding the offset of the navigation from the top of the document. Then, it defines the scroll event for the window object, which checks to see if the window has been scrolled past the navigation element. If this has occurred, it fixes the navigation to the top of the window. If not, the navigation is returned to it’s default state.