MICHELEPISANI.IT

I plugins di jQuery più utilizzati nel web

Barra di navigazione sempre in top durante lo scorrimento della pagina

Menu sempre in alto alla pagina con stickyNavbar.js

Luglio 03
07:442014

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.

 

Tags
Condividi

Autore

Michele Pisani

Michele Pisani

Ho uno spiccato orientamento al problem-solving, se è troppo facile non mi diverto :)
Credo nella volontà e nel cambiamento perchè hanno fatto della mia passione il mio pane quotidiano.
Se devo descrivermi con una sola parola direi... "Concretezza", la mia stretta di mano è una garanzia.

2 Commenti

  1. Susanna domenica 7 dicembre 2014 alle ore 11.03

    Ciao, ho implementato questo menu in Joomla 3.2 ma non mi vanno più i link escluso il link della home che funziona, ho notato che gli altri link non funzionano perchè manca la prima parte cioè sono relativi anzichè assoluti , sapresti aiutarmi? mi da questo errore: Uncaught Error: Syntax error, unrecognized expression: anonymuos function.. grazie di tutto Susanna

    Rispondi a questo commento
    • Michele PisaniAutore domenica 7 dicembre 2014 alle ore 15.42

      Ciao Susanna, quel tipo di errore, trattandosi di sintassi, è comunemente restituito quando si lavora con apici e doppie virgolette nella costruzione di una stringa che per vari motivi può non risultare corretta compromettendo il resto dello script. Non ho ben capito la parte dove parli di link relativi e assoluti, nel senso che questo plugin è adatto a siti di tipo one-page dove tendenzialmente il nome a dominio è superfluo per i link di tipo ancora richiamati dal menù. Ho visitato il tuo sito (quello che hai inserito come campo per inviare il tuo commento) dove ho notato che tale effetto è presente, anche se non ho verificato se hai utilizzato espressamente lo script in questione o meno, tuttavia è funzionante sia su IExplorer che su Firefox. Se il sito è quello direi che hai già risolto da te il problema, altrimenti fammi sapere.

      Rispondi a questo commento

Scrivi un Commento

Il tuo indirizzo email non sarà pubblicato.
I campi contrassegnati da un * sono obbligatori

Articoli e Argomenti correlati

Categorie popolari

Iscriviti alla mia newsletter

La tua e-mail con me sarà al sicuro.
Non fornirò mai le tue informazioni a nessuno!

Ultimi commenti

Michele

Ciao domenico,
hai provato con

Michele

Ciao Luca,
hai provato a contattare l'assistenza di Facebook? Attualmente la via migliore …

domenico

ciao, puoi aiutarmi?

ho creato un form che tramite una chiamata mi restituisce una …

Luca

Peccato che fb abbia modificato tutto ed ora sembra non esserci alcun modo per accedere alle …