Immagini di sfondo diverse per ogni articolo Joomla!
Fissare in alto il menu dopo lo scroll della pagina
Extrowebsite

L'articolo di oggi tratta un argomento molto discusso e richiesto nei forum ai quali partecipo: Come fare per avere il menu di navigazione fisso dopo che scorriamo la pagina verso il basso.

E' possibile ottenere tale caratteristica con l'uso dei CSS3 e jQuery. Vediamo come fare.

E' una funzionalità molto importante e comoda sia da desktop e, soprattutto, da smartphone in quanto se una pagina contiene molti contenuti e si vuole tornare al menu per selezionare un altro link, la si deve scorrere verso l'alto. Ne va della praticità ed usabilità del sito.

In questo modo, invece, offriamo all'utente quello di cui necessita senza infastidire la sua permanenza nel nostro sito.

Di cosa abbiamo bisogno? HTML, CSS3 e della libreria jQuery, oltre a qualche rigo di javascript nella head della pagina.

Il codice HTML

La pagina demo che verrà presentata alla fine del tutorial conterrà nell'ordine:

  • Header
  • Menu di navigazione
  • Contenuti

il cui codice è:

<div class="header">
	LOGO
</div>

<div class="nav-container">		
	Home | Blog | Contatti
</div>

<div class="wrapper">
	Contenuti....
</div>
.header {
background:lightblue;
padding:3em .5em; 
}

.f-nav{ z-index: 9999; position:fixed; top:0; width:100%;}

.nav-container{
height: 42px;
width:100%;
background:#f0f0f0;
border-bottom:1px solid #ddd;
}

.nav-container ul {list-style:none; line-height:42px; }

.nav-container ul li, .nav-container ul li a { display:inline-block;}

.wrapper{
min-height:2500px;
max-width:500px;
margin: 0 auto;
padding-top:50px;
text-align:left;
}

Notare la classe f-nav, volutamente in grassetto, perchè verrà "aggiunta" al menu tramite il codice jQuery. Meglio avere uno z-index molto alto così da evitare sovrapposizioni da parte di altri elementi.

Il codice Javascript

Oltre al link della libreria jQuery nella head della pagina, si deve aggiungere il seguente codice:

jQuery("document").ready(function($){	
	var nav = $('.nav-container');
	
	$(window).scroll(function () {
		if ($(this).scrollTop() > 200) {
			nav.addClass("f-nav");
		} else {
			nav.removeClass("f-nav");
		}
	}); 
});

Cosa è scritto in queste righe di codice? Se stiamo visualizzando la pagina e scorriamo verso il basso per una altezza maggiore di 200px, al menu viene aggiunta la classe f-nav. Di conseguenza il menu rimarrà fermo nella parte alta del monitor o dello smartphone.

Diversamente, se non viene compiuta nessuna azione di scorrimento, il menu rimarrà sempre nella sua posizione iniziale e non verrà aggiunta alcuna classe.

Per comprendere meglio tutto quello che è stato descritto, ho preparato un articolo demo nel quale è possibile vedere il .