Vediamo come costruire passo passo un header che si scolorisce e rimpicciolisce quando scrolliamo:

Innazio tutto ecco l’esempio:
http://demo.studio-88.it/haderopacity.html

Per prima cosa andiamo a definire le regole del foglio di stile per:

body{
	margin:0;
	padding:0;
	background-color:#FFF;
	color:#006;

}
#header{
	background-color:#000;
	position:fixed;
	top:0;
	left:50%;
	width:950px;
	margin-left:-475px;
	height:100px
}

#header h1{
	color:#FFF;
	margin:0;
	padding:0;
	font-size:3.5em;
	font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
	padding-bottom:25px;
	line-height:1;
	font-weight:normal;
}
.container{
	margin:0;
	padding:0;
	background-color:#fff;	
	border:1px solid #000;
	position:relative;
	padding-top:700px;
	width:950px;
	margin:0 auto;
}

Dato che quando l’header sale vogliamo lasciar sotto un bordino di 25px, nella regola #header h1 abbiamo inserito:

padding-bottom:25px;

In modo che tale bordino non venga occupato da testo o altre informazioni.

L’effetto “scomparsa” sullo scroll è molto semplice da ottenere con jQuery, basta questo semplice codice:

$(window).scroll(function(){
	$('#header')
		.fadeTo('slow', 0.5)
		.animate({'top':'-75px'},'slow');					  
});

In pratica quando viene riconosciuto lo scroll della finestra viene eseguito prima un fadeTo() sull’header (diminuzione dell’opacità dal 100% al 50%), dopo questa operazione viene animato l’header in modo che la proprietà top venga diminituta a -75px.
Essendo tale valore negative e considerando che l’altezza dell’header è di 100px, il risultato che otteniamo è che saranno visualizzati sulla schermo solamente gli utlimi 25px.
Se avessimo voluto vedere solo gli ultimi 10px (ad esempio) avremmo dovuto scrivere:

$(window).scroll(function(){
	$('#header')
		.fadeTo('slow', 0.5)
		.animate({'top':'-90px'},'slow');					  
});

A questo punto aggiungiamo un’altra funzione che ci consente di ripristinare la situazione iniziale dell’header.

$('#header').click(function(){
	$('#header')
		.animate({'top':'0px'},'fast')
		.fadeTo('fast', 1.0);					  					  
});

In totale 6 righe di codice! ci si può stare.