Utilizzando questo sito accetti il nostro uso dei cookie. Approfondisci

Fixed Scrollable Nav Bar durante lo scrolling

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

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

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

CSS


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

JQUERY


$(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');
}
});
});

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:


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

Di nuovo, ecco i link:

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

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

Buon divertimento :)


VUOI CREARE IL TUO SITO O BLOG WORDPRESS?

Scegli uno tra i migliori hosting per WordPress

HOSTING

Scegli uno tra i migliori hosting per WordPress

Hosting

Scegli uno tra i migliori temi WordPress professionali

GRAFICA

Scegli uno tra i migliori temi WordPress professionali

Grafica

Guide e risorse per gestire il sito WordPress a 360°

GESTIONE

Guide e risorse per gestire il sito WordPress a 360°

Gestione

EMAIL NEWSLETTER

Vuoi ricevere i miei ultimi articoli
comodamente nella tua email? È gratis!
Ben 3552 persone lo stanno già facendo!
Anonimo
   
con le dita sempre in costante, frenetico movimento sulla tastiera… vengo spesso trascinato e catturato “in rete” per colpa delle mille idee che mi girano per la testa (prima o poi troverò quella giusta)… dal futuro incerto (nonostante una laurea, e chi non lo è?..siamo in tanti!) .. credo fortemente nella condivisione della conoscenza!
7 Commenti
  • Manuel

    Ciao Roberto,

    Avrei da farti una domanda (lo chiedo a te perché mi sembri abbastanza affidabile).
    La domanda in questione non riguarda questo argomento ma questo http://www.robertoiacono.it/vendere-spazi-pubblicitari-sul-sito-blog-partita-iva-o-ritenuta-dacconto/
    volevo domandartelo li, ma dato che l’ argomento è vecchio pensavo che non mi avresti risposto!

    La domanda è la seguente:
    Ho di recente aperto un Blog (nulla di serio per adesso), e dato che sono un povero disoccupato al momento di P.IVA per i guadagni non se ne parla proprio.
    Però ho fatto un affiliazione con un sito specializzato in videogiochi/fumetti/tecnologia in generale che è multiplayer.it, la loro affiliazione mi permette di guadagnare il 10% su ogni vendita compiuta che riesco a procurarli tramite i miei banner.
    Però, loro non pagano in contanti.
    Ma per ogni acquisto andato a buon fine, quel 10% guadagnato va a finire sul mio account del sito in questione, e quindi posso spendere il credito accumulato solo nel loro sito!

    Esempio: tramite i loro banner sul mio sito, sono riuscito a far comprare un gioco a 70€ e quindi ho guadagnato 7€ che posso accumulare insieme ad altre vendite o scegliere subito se utilizzarli per scalarli dai miei acquisti.

    Quiiiindi, (scusa il papiro)-> Legalmente sono apposto? insomma.. non ricevo soldi “fisici”… cosa ne pensi?

    Grazie e scusa il disturbo!

    • Roberto Iacono

      Perdonami Manuel,
      ma non sono informato su questa particolare situazione, ti consiglio di rivolgerti sul forum di Giorgiotave, troverai gente competente in materia.

  • Irene

    Come sei bravo!
    Ormai quando cerco qualsiasi cosa inerente il web seo cerco
    “keyword + iacono” e sono sicura di ottenere un risultato utile!

    Se volessi chiederti un suggerimento con messaggio privato è possibile?
    Grazie
    Irene

    • Roberto Iacono

      Ciao Irene,
      ti ringrazio :)

      Chiedi pure a info AT robertoiacono.it

  • Giorgio

    Innanzi tutto, complimenti per il tuo sito, un vero faro nel mare magnum del web!
    La domanda che vorrei farti (sperando di essere chiara) forse ti farà sorridere, ma sono completamente digiuno d’informatica e di WordPress. Così, prima di accingermi ad affrontare questo mondo e a comprare un tema premium, leggendo questo tuo ultimo articolo mi sono chiesto:

    Esistono temi molto belli, ma a volte con home page davvero sovrabbondanti (un esempio sono i cosiddetti one page themes). Nelle modifiche concesse da chi ha creato il tema, esiste anche la possibilità di eliminare parti della magari fin troppo completa home page, oppure devono essere accettate così come sono, limitandoci a cambiare sfondi, colori e cose di poco conto?
    Lo chiedo da inesperto totale: se mi dici che le modifiche sono fattiibili, ma soltanto se comincio a sparare codici a destra e a manca, lascio perdere del tutto. Prima di disturbarti, ho cercato di capire qualcosa da solo, ma per me è davvero tutto confuso. Un tema che mi piace, per esempio, offre un certo Visual Composer per personalizzare le pagine… ma non ho idea di quanto le possa personalizzare!

    Non so quanto sia chiara questa domanda, a dire il vero… Ti ringrazio in anticipo.
    Giorgio

    • Roberto Iacono

      Ciao Giorgio,
      grazie a te :)

      Puoi modificare il tema, se vuoi eliminare delle parti, non è neanche molto difficile, dovrai solamente eliminare il codice che genera quelle parti.
      L’unico scoglio è il saper riconoscere quelle parti, ma niente di impossibile…

      • Giorgio

        Ti ringrazio tantissimo! Sei sempre gentilissimo ed estremamente competente. Cercherò di provarci, tipo “tentativi ed errori”… Comunque tenterò per lo meno di partire con il piede giusto e di scegliere un tema che sia il più vicino possibile a quello che davvero mi serve.

        Grazie ancora, davvero!

Seguimi

Scarica gli ebook gratuiti

Vuoi creare e gestire il tuo blog WordPress autonomamente ed in maniera gratuita?

Allora scarica gratuitamente gli ebook Blogging Box e Le 30+ cose da non fare con WordPress, inserisci la tua email qui sotto:
13584+
Scarica gratuitamente gli ebook!

Per maggiori informazioni guarda questa pagina per la Blogging Box e questa per le 30+ cose da non fare con WordPress.

Scarica gli ebook gratuiti

Vuoi creare e gestire il tuo blog WordPress autonomamente ed in maniera gratuita?

Allora scarica gratuitamente gli ebook Blogging Box e Le 30+ cose da non fare con WordPress, inserisci la tua email qui sotto:
13584+
Scarica gratuitamente gli ebook!

Per maggiori informazioni guarda questa pagina per la Blogging Box e questa per le 30+ cose da non fare con WordPress.
Unisciti agli oltre 10999 lettori
che seguono questo blog
3152
982
2251
4614