Como hacer un header dinámico con HTML, CSS y Javascript

Muchas veces el espacio es una de las limitaciones del diseño web, impidiéndonos hacer cosas realmente creativas como por ejemplo agregar elementos que le dan mucha vida a nuestro sitio web, ya sea con imágenes o simples espacios elegantes entre los elementos. El problema a todo esto es la UX (User Experience, Experiencia de Usuario) que vamos a ofrecer ya que si ocupamos mucho espacio con elementos muchas veces podemos dañar la navegación del usuario convirtiendo el sitio en uno pesado de navegar.

Es por eso que hoy en este tutorial aprenderemos como hacer un Header dinámico para nuestros sitios web, una cabecera cambia de posición y tamaño dependiendo de en que parte de la pagina se encuentre el usuario. Esto lo haremos simplemente con HTML, CSS y Javascript con su librería Jquery.

Ah y casi me olvido!, por si fuera poco, este header dinámico también sera adaptable a dispositivos móviles (Responsive Design)

Demo del Header Dinamico: http://falconmasters.com/demos/header_dinamico/

Recursos a utilizar:

Jquery: http://code.jquery.com/jquery-latest.js

Primero que nada vamos a crear nuestra estructura HTML, empezando por la etiqueta meta viewport que nos permitirá adaptar nuestro sitio a dispositivos moviles. (Recuerda que va dentro de la etiqueta HEAD)

	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

También enlazamos nuestra librería Jquery.

<script src="http://code.jquery.com/jquery-latest.js"></script>

Y para la estructura HTML restante lo único que necesitamos es un Header y dentro el logotipo y el menú de navegación.

Estructura HTML del header:

<header>
		<div class="wrapper">
			<div class="logo">FalconMasters</div>
			
			<nav>
				<a href="#">Inicio</a>
				<a href="#">Servicios</a>
				<a href="#">Proyectos</a>
				<a href="#">Contacto</a>
			</nav>
		</div>
	</header>

Como puedes ver he agregado un div con una clase wrapper que encierra tanto el logotipo y el menú, esta clase la utilizaremos para centrar el logotipo y el menú ya que nuestro header tendrá por defecto un ancho del 100%. Otra cosa a mencionar es que como puedes ver dentro de la etiqueta nav he agregado un par de enlaces, en esta ocasión no haremos el menú a base de listas, esto para poder centrar mas fácil el menú cuando estemos en vista de dispositivo móvil.

Ya por ultimo te recomiendo que agregues unos párrafos de texto después de la etiqueta header, esto para que pueda aparecer la barra de navegación vertical en tu navegador y puedas ver el cambio, de otra manera sera complicado poder hacer pruebas.

header {
	width:100%; /* Establecemos que el header abarque el 100% del documento */
	overflow:hidden; /* Eliminamos errores de float */
	background:#252932;
	margin-bottom:20px;
}

.wrapper {
	width:90%; /* Establecemos que el ancho sera del 90% */
	max-width:1000px; /* Aqui le decimos que el ancho máximo sera de 1000px */
	margin:auto; /* Centramos los elementos */
	overflow:hidden; /* Eliminamos errores de float */
}

header .logo {
	color:#f2f2f2;
	font-size:50px;
	line-height:200px;
	float:left;
}

header nav {
	float:right;
	line-height:200px;
}

header nav a {
	display:inline-block;
	color:#fff;
	text-decoration:none;
	padding:10px 20px;
	line-height:normal;
	font-size:20px;
	font-weight:bold;
	-webkit-transition:all 500ms ease;
	-o-transition:all 500ms ease;
	transition:all 500ms ease;
}

header nav a:hover {
	background:#f56f3a;
	border-radius:50px;
}

El código anterior es muy sencillo como ya pudiste ver, quizás aun tienes dudas de algunas cosas como por ejemplo del overflow:hidden; con esto lo que hacemos básicamente es limpiar unos errores que vamos a tener, ya que al logo lo hemos desplazado hacia la izquierda y el menú hacia la derecha con float:left; y float:right;

También como puedes ver en el código anterior le hemos dado un espaciado arriba y abajo mediante un line-height, tu lo puedes hacer con margenes si es que quieres, solo que tendrias que modificar el código.

Esta parte anterior es la que usamos para el header por defecto, pero ahora tenemos que hacer el código CSS, para el header cuando queremos que cambie de tamaño, para hacer esto lo que haremos es que crearemos una nueva clase y trabajaremos sobre ella. Si quieres ver los cambios que haremos a continuación tienes que agregarle una clase llamada header2 a la etiqueta header. (Es importante que cuando acabes de hacer pruebas le quites la clase y dejes la etiqueta sin esa clase).

Para la parte del .header2 lo que haremos es cambiarle la posición del encabezado a una posición fija en pantalla, después simplemente reducir el line-height y hacer mas pequeña la fuente. Tu puedes hacer cuantos cambios quieras.

Código CSS de .header2

.header2 {
	position: fixed;
	height:100px;
}

.header2 .logo {
	line-height:100px;
	font-size:30px;
}

.header2 nav {
	line-height:100px;
}

Ya para finalizar con CSS vamos a agregar la parte que nos permite adaptar el header a un dispositivo móvil.

@media screen and (max-width: 950px) {
	header .logo,
	header nav {
		width:100%;
		text-align:center; /*Centramos el menu y el logotipo*/
		line-height:100px;
	}

	.header2 {
		height:auto;
	}

	.header2 .logo,
	.header2 nav {
		line-height:50px;
	}
}

Y ya por ultimo vamos a pasar al código Javascript en donde detectamos cuando el usuario baje en pantalla y cambiamos de un header a otro, esto simplemente agregando la clase .header2 al bajar en pantalla y quitandola al subir de nuevo hasta arriba.

$(document).ready(function(){

	$(window).scroll(function(){
		if( $(this).scrollTop() > 0 ){
			$('header').addClass('header2');
		} else {
			$('header').removeClass('header2');
		}
	});

});

Tutorial Como hacer un header dinámico con HTML, CSS y Javascript