Cabecera fija al hacer scroll hacia abajo

Al final lo encontraste…

Si, aquí vamos a explicar como hacer que tu sección, ya sea div, header, etc, quede enganchada a la parte superior del navegador cuando hacemos scroll hacia abajo.

Lo primero, y primordial, tener un documento HTML, con nuestra librería jQuery cargada y funcionando, preferentemente la versión 1.3.6 o posterior.

Lo primero que vamos a hacer es crear nuestro script. En este ejemplo es un menú horizontal, por lo tanto el tag será <nav> (HTML5).

// Menu scroll
var nav = $('nav');
pos = nav.offset();

// Esperamos al DOM
$(window).scroll(function(){
        // Anclamos el menú si el scroll es
        // mayor a la posición superior del tag
	if ( ($(this).scrollTop() >= pos.top)){
		// Añadimos la clase fixes al menú
		nav.addClass('fixed');
		// Añadimos la clase scrolling al contenido **
		$("#content-wrapper").addClass("scrolling");
		// Mostramos la sombre inferior del menú
		$( '#nav-shadow' ).show('size');
	// Eliminamos las clases para volver a la posición original
	} else if ( ($(this).scrollTop() <= pos.top)){
		// Elimina clase fixes
		nav.removeClass('fixed');
		// Elimina clase scrolling
		$("#content-wrapper").removeClass("scrolling");
		// Esconde la sombra
		$( '#nav-shadow' ).hide();
	}
});

En este ejemplo también tenemos una sombra asociada a nuestro menú, que aparece con un efecto size, al anclar el menú. En este caso la sombra es una imagen, pero también podemos utilizar atributos CSS3 para crearla.

Aquí el código CSS a implementar.

.fixed {
	position:fixed;
	border-bottom: 1px solid #DDD;
	top: 0px;
	background: #F5F4F2;
	width: 100%;
	left:0px;
	z-index: 1000;
}

.scrolling {
	margin-top:40px !important;
}

El margin-top de la clase scrolling, es igual a la altura del menú.