Menu sempre in alto alla pagina con stickyNavbar.js

Avere un menù o una barra di navigazione sempre a disposizione in alto del browser anche durante lo scorrimento della pagina può essere di aiuto per la navigazione di un sito web, l'utente che visita il nostro sito può essere agevolato avendo sempre a disposizione dei link principali verso i quali dirigersi, siano essi link a diverse sezioni del sito o a sottocategorie della categoria visitata o briciole di pane per tornare a pagine alle quali ha acceduto in precedenza.
Ci viene incontro allo scopo il plugin per jQuery chiamato stickyNavbar.js reperibile su GitHub e messo a disposizione da jbutko.
Come mostrato nel link appena fornito, questo plugin, arricchito con altre funzioni, librerie e fogli di stile, permette di ottenere dei risultati accattivanti per l'occhio dell'utente.

Lo scopo della breve spiegazione che seguirà sarà quello di spogliare stickyNavbar.js delle varie funzioni accessorie in modo da averlo pulito e pronto per essere personalizzato a seconda delle proprie esigenze.
Sono quindi necessari il file della libraria di jQuery (nell'esempio sul sito del produttore viene usato jquery-1.10.2.min.js ed a scanso di equivoci è meglio attenersi alle indicazioni, ma funziona anche con versioni precedenti; testato fino alla 1.7.2) e quello del plugin in questione (scaricabile dal link fornito poco sopra).

Il cuore del funzionamento sta nel definire un menù o una barra di navigazione ed assegnarli una classe, a sua volta a questa classe gli verrà assegnata l'istanza del plugin, come nell'esempio:

<div id="header" class="header">
    <nav id="nav">
        <ul class="nav navbar-nav">
            <li>
                <a href="#home">Home</a>
            </li>
            <li>
                <a href="#about">Chi siamo</a>
            </li>
            <li>
                <a href="#services">Servizi</a>
            </li>
            <li>
                <a href="#contact">Contatti</a>
            </li>
        </ul>
    </nav>
</div>

<script type="text/javascript">
  $(function () {
     $('.header').stickyNavbar();
  });
</script>

Con dei piccoli accorgimenti in CSS, mostrati nell'esempio di cui sotto (presente direttamente su JSFiddle), è possibile oltre che far rimanere sempre in Top la barra di navigazione, assegnare automaticamente una classe di modo che ciascun elemento della barra di navigazione si attivi in base alla posizione in cui ci troviamo nella pagina principale.

Nel tab "Result" dell'esempio di seguito potete apprezzarne l'effetto dal vivo.