jQuery: impostare l'altezza delle sezioni di un sito a parallasse

Se sviluppate siti con la tecnica del parallasse è di fondamentale importanza assegnare alle sezioni un'altezza minima in modo da poter avere gli sfondi delle giuste proporzioni. Con jQuery è un'operazione molto semplice.

Si tratta di sottrarre dall'altezza della finestra l'altezza dell'header (o anche del footer) della pagina e usare tale valore come altezza minima delle sezioni:


var headerHeight = $( "#header" ).height(),
	winHeight = $( window ).height(),
	minHeight = winHeight - headerHeight,
	$sections = $( "section", "#content" );
	
	$sections.css( "minHeight", minHeight + "px" );

Usando la proprietà CSS min-height evitiamo i noti problemi di overflow relativi alla proprietà height.

Torna su