In un articolo di un pò di tempo fa, si è visto come centrare con CSS/Javascript un div al centro della pagina.
L’obiettivo di questo nuovo articolo è far si che il div venga visualizzato sempre al centro della finestra, anche qualora l’utente fa lo scrolling della pagina.
Il div in questione seguirà l’utente, restando effettivamente sempre al centro della pagina. Potremo utilizzare questa tecnica per inserire un messaggio o un immagine in evidenza nel nostro sito oppure un banner.

Realizzeremo una sola funzione che chiameremo appunto: centra().
Per rendere più efficiente il nostro codice Javascript utilizzeremo il framework JQuery così saremo quantomeno sicuri che il risultato finale sia adeguato per la maggior parte dei browser in circolazione. Comunque il suo uso sarà minimo e non richiede particolari conoscenze.
In fondo all’articolo è possibile provare o scaricare il codice completo.

Vediamo quindi il codice della funzione Javascript:

<script type='text/javascript'>
function centra(div){
	var DIVwidth = $(div).width();	
	var DIVheight = $(div).height();
	var SCREENwidth = $(document).width();
	var SCREENheight = $(window).height();	
	var SCREENscrolltop = $(window).scrollTop();
	$(div).animate({   
		top: (SCREENheight-DIVheight)/2+SCREENscrolltop+"px",
		left: (SCREENwidth-DIVwidth)/2+"px"
	},100,function(){
        centra(div);
    });	 
}
</script>

La funzione una volta richiamata calcola larghezza e altezza del div da centrare, quindi larghezza e altezza della finestra del browser e la quantità di scroll effettuato (scrollTop()).
Il div viene successivamente animato impostando i due nuovi valori per le proprietà top e left.
Dove top sarà dato da: (altezza finestra – altezza div)/2 + scroll
Mentre left sarà dato da: (larghezza finestra – larghezza div)/2
La funzione viene poi richiamata ad intervalli regolari(di default 100 ms) per ricalcolare il posizionamento.
Infine per invocare la funzione, su un ipotetico div con id=’box_centrale’, è necessaria la seguente sintassi:

<script type='text/javascript'>
centra('#box_centrale');
</script>

Cliccando qui è possibile vedere in azione il codice.

Cliccando qui è possibile scaricare il codice.