L'articolo di oggi tratta un argomento molto discusso e richiesto nei forum ai quali partecipo: Come avere il menu di navigazione fisso dopo che scorriamo la pagina verso il basso.
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>
Il codice CSS
.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, prima del tag <body> di chiusura:
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 vedere la pagina in azione e comprendere meglio tutto quello che è stato scritto, ho preparato un articolo demo nel quale è possibile vedere il menu fisso in alto dopo lo scroll della pagina.