Fixed Scrollable Nav Bar durante lo scrolling

L’utente ha bisogno di essere guidato all’interno di un sito, giusto? Bene.

Il primo passo è quello di realizzare un buon menù di navigazione (il classico Home, Chi sono, Portfolio, Contatti, Categorie…).

Vero. Peccato che questo menù rimane visibile solamente qualche micro secondo, giusto il tempo in cui l’utente vede comparire qualcosa sullo schermo e decide immediatamente di fiondarsi verso il contenuto della pagina, perdendosi alcuni link che vuoi mettere in risalto.

Quindi, come dare un aiuto concreto nel migliorare la navigazione (e probabilmente anche il numero di pagine visualizzate, il tempo di permanenza sul sito, i guadagni, la sua soddisfazione) ?

Fixed Scrollable Bar

Sto trovando meravigliosi i menù di navigazione che, nonostante siano presenti dopo un po’ di spazio dall’inizio della pagina, “si fissano” nella parte superiore dello schermo durante lo scrolling della pagina stessa. L’utente non può non vedere il menù, e nel caso avesse bisogno, non deve fare neanche la faticaccia di girare la rotellina del mouse per tornare in cima alla pagina… è tutto lì a portata di mouse.

Questi menù sono quelli che chiamo Fixed Scrollable Bar (o sticky scrollable bar, o in mille altri modi), e il concetto si può applicare a qualsiasi elemento della pagina (per esempio, ho mostrato come fissare un widget nella sidebar, molto utile per banner o per vendere ebook).

Ho pensato che ti potrebbe servire il codice, così mi sono messo a prepararlo e… et voilà, demo e codice 😉

Ecco il codice:

HTML

[html]
<div id="nav">
<ul id="menu-primary">
<li id="menu-item-3667"><a href="https://www.robertoiacono.it/">Home</a></li>
<li id="menu-item-5400"><a href="https://www.robertoiacono.it/risorse-wordpress/">Risorse</a></li>
…
</ul>
</div>

<div id="content">
<h1>Fixed Nav Bar Demo <span>- by Roberto Iacono</span></h1>
…

[/html]

CSS

[css]

.fixed {
position: fixed;
top: 0;
z-index: 999;
}

[/css]

JQUERY

[javascript]

$(document).ready(function(){
// Calcola la posizione in altezza dell’elemento. Usa outerHeight() se hai del padding https://api.jquery.com/outerHeight/ o offset().top.
//Altrimenti usa anche height() https://api.jquery.com/height/
//#nav è il selettore del menù di navigazione
var navHeight = $(‘#nav’).outerHeight();
// Entra quando si scrolla la pagina
$(window).scroll(function(){
// Se scorre la pagina oltre il valore salvato in navHeight (quindi la posizione della nav Bar), esegue altre istruzioni
if ($(window).scrollTop() > navHeight){
// Aggiunge la classe .fixed al menù, così da renderlo fisso nella parte superiore dello schermo (impostato tramite style.css)
$(‘#nav’).addClass(‘fixed’);
// aggiungo il padding al contenuto principale, altrimenti l’inizio non si vedrebbe a causa della sovrapposizione della barra di navigazione
$(‘#content’).css(‘padding-top’, navHeight+’px’);
}else{
// se torna sopra il valore di navHeight, rimuove la classe .fixed, e la barra ritorna alla sua posizione originale
$(‘#nav’).removeClass(‘fixed’);
// rimuovo il padding
$(‘#content’).css(‘padding-top’, ‘0’);
}
});
});

[/javascript]

Ho commentato il codice nelle zone “più a rischio”, per cui non dovresti avere problemi a capire come funziona.

Ovviamente, devi sostituire il “nav” con il tuo selettore della barra di navigazione (leggi questo articolo che ti potrà servire), la stessa cosa per il “content“.

Se hai intenzione di fare delle modifiche, ti consiglio di provare  jsfiddle.net, dove ti ho già caricato una parte del codice 😉

Ricordati che per funzionare, devi includere la libreria jQuery , e per farlo, in WordPress, devi inserire questa funzione nel file functions.php:

[php]

// funzione per aggiungere scripts al tema
function add_theme_scripts() {
wp_enqueue_script(‘jquery’);
}
add_action( ‘wp_enqueue_scripts’, ‘add_theme_scripts’ );

[/php]

Di nuovo, ecco i link:

Ti segnalo altri tutorial interessanti, così da aver la possibilità di scegliere tra diversi modi di implementazione:

• http://www.hongkiat.com/blog/css-sticky-position/
• http://stackoverflow.com/questions/10520814/bar-fixed-on-top-but-only-if-the-scroll-tries-to-hide-it
• http://www.techknowlogists.com/how-to-create-sticky-navigation-bar/
• http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery

Se non vuoi perdere tempo, ho trovato alcuni plugin che permettono di rendere gli elementi di una pagina web fissi:

• http://jquery-plugins.net/tag/sticky-scroll
• http://codecanyon.net/item/jquery-css3-sticky-mega-menu-bar/ (a pagamento)

Buon divertimento 🙂