Actualizado el lunes, 23 octubre, 2017

La estructura html

<header>
		<div class="contenedor">
			<div class="logo">
				<img src="http://dummyimage.com/200x100/000/fff&text=LOGO" alt="">
			</div>
			<nav class="menu">
				<ul>
					<li><a href="#">Inicio</a></li>
					<li><a href="#">Blog</a></li>
					<li><a href="#">Proyectos</a></li>
					<li><a href="#">Trabajos</a></li>
					<li><a href="#">Contacto</a></li>
				</ul>
			</nav>
		</div>
	</header>

Como puedes ver en el header, hemos colocado un contenedor para el logotipo y el menu con una clase llamada .contenedor esta clase la usaremos para centrar los elementos del menú.

Después del header es importante que tengas contenido para que aparezca un scroll y puedas bajar en la pagina para ver el menú en acción.
Código CSS

.contenedor {
	width: 95%;
	max-width:1000px;
	margin:auto;
}
 
.contenedor p {
	margin-bottom:40px;
}
 
header nav {
	background:#3498db;
	margin-bottom:10px;
}
 
header nav ul {
	list-style: none;
	overflow: hidden;
}
 
header nav ul li {
	float: left;
}
 
header nav ul li a {
	display: block;
	padding:20px;
	color:#fff;
	text-decoration: none;
}
 
header nav ul li a:hover {
	background:#2980b9;
}
 
 
/* --- Clase que agregaremos cuando el usuario haga scroll --- */
.menu-fixed {
	position:fixed;
	z-index:1000;
	top:0;
	max-width:1000px;
	width:100%;
	box-shadow:0px 4px 3px rgba(0,0,0,.5);
}

Lo importante en este código CSS es que al final tenemos la clase .menu-fixed esta clase no nos sirve de momento, pero lo que vamos a hacer con ella es que cuando el usuario haga scroll y baje en la pagina, al llegar a cierto punto le diremos con jquery que agregue esta clase a nuestro nav. Esta clase lo que nos permite es posicionar el menú fijo a pantalla en lo mas alto de la pagina, esta clase nos sirve para ver cual sera el estado del menú al hacer scroll y llegar a determinado punto.

Esta clase la puedes agregar al nav si quieres probar como se vería y/o editar los estilos, pero recuerda que la debes de borrar cuando termines de probarla o trabajar con ella.
Lo siguiente es hacer es agregarle la clase .menu-fixed al menú una vez que llegue a determinado punto. Cual es ese determinado punto? Bueno pues cuando la posición del scroll llegue al inicio del menú. Lo haremos con una condicional.

Código Jquery

$(document).ready(function(){
	var altura = $('.menu').offset().top;
	
	$(window).on('scroll', function(){
		if ( $(window).scrollTop() > altura ){
			$('.menu').addClass('menu-fixed');
		} else {
			$('.menu').removeClass('menu-fixed');
		}
	});
 
});

El codigo es sencillo, pero vamos por partes, primero queremos saber la distancia entre el menu y la parte mas alta de la pagina, asi que guardamos en una variable llamada altura este dato, para sacarlo hacemos uso del objeto offset.

Después vamos a ejecutar un evento, cada que el usuario haga scroll, es decir tanto si baja en pagina o si sube. Cada que haga scroll y ejecutemos este evento vamos a lanzar una condicional que revisara si la posición del scroll es mayor a la altura, si es asi, agregara la clase .menu-fixed, de lo contrario la va a quitar, para que el menú regrese a su posición original.

Y con esto tendríamos nuestro menú de navegacion listo. Recuerda que con la clase .menu-fixed puedes hacer lo que quieras, puedes hacer que al bajar en la pagina el menu se quede pegado pero que tenga el 100% de ancho, para eso a nuestra clase .menu-fixed le haríamos las siguientes modificaciones:

.menu-fixed {
	position:fixed;
	z-index:1000;
	top:0;
	/*max-width:1000px;*/
	left:0;
	width:100%;
	box-shadow:0px 4px 3px rgba(0,0,0,.5);
}

Agregamos un left:0; y le quitamos la restricción del ancho max-width:.

Recurso: http://code.jquery.com/jquery-latest.js
Demo: demo.