Supporto volontario e collaborativo per Joomla!® in italiano

Barra menu (oppure sidebar) fissa con protostar e jQuery

Valutazione attuale: 5 / 5

Stella attivaStella attivaStella attivaStella attivaStella attiva
 
Screen sidebar fissa

Se volete impostare qualche elemento fisso allo scroll della pagina come una barra laterale o una barra superiore tipo il menu di questo sito, in questa guida vi spiegherò come implementare questa funzione tramite un esempio pratico.

Come Template per gli esempi utilizzerò protostar ma se capite il funzionamento potrete integrarle in gran parte dei template.

Mettiamoci al lavoro:

1) Innanzitutto scarichiamo la libreria javascript da qui(destro salva con nome) https://rawgit.com/leafo/sticky-kit/v1.1.1/jquery.sticky-kit.min.js

2) Accediamo in FTP entriamo nella directory "templates/protostar/js" e carichiamoci il file appena scaricato

3) Ora andiamo in "templates/protostar/" e modifichiamo il file index.php del template.

4) All'interno del file indicativamente verso la riga 40 (dove troviamo le varie inclusioni degli script) aggiungiamo questo codice per includere lo script nel template:

$doc->addScript('templates/' . $this->template . '/js/jquery.sticky-kit.min.js');

5) Ora se vogliamo rendere fisso il menu di protostar scriviamo questo codice subito dopo quello inserito nel punto 4:

$doc->addScriptDeclaration('
jQuery(document).ready(function() {
            var j = jQuery.noConflict();
            if (screen.width > 768) {
                jQuery("#navigation").stick_in_parent({
                        offset_top: 0,
                        inner_scrolling: false,
                        bottoming: false,
                        recalc_every: 1,
                        sticky_class: \'stick_menu\'})
                    }
                });
');

Potrebbe essere necessario assegnare uno sfondo al menu quindi nel file template.css aggiungete .stick_menu{background-color:white;z-index:10000}

OPPURE Se vogliamo rendere fissa la sidebar(barra laterale)

$doc->addScriptDeclaration('
jQuery(document).ready(function() {
            if (screen.width > 768) {
                jQuery("#aside").stick_in_parent({
                    offset_top: 10,
                    inner_scrolling: false,
                    bottoming: true,
                    recalc_every: 1,
                    sticky_class: \'stick_sidebar\'})
                        .on("sticky_kit:bottom", function(e) {
                                var calculated_top, self;
                                self = jQuery(this);
                                self.css(\'bottom\', \'-10px\');
                                });
                        }
                });
');

6) Andate nel frontend del vostro sito e verificate. Dovreste avere il vostro bel menu (o sidebar) fisso.

 

Ora visto che sono partito al contrario ovvero prima dalla parte pratica passiamo alla parte teorica per comprendere il codice. Prendiamo in esempio il codice della sidebar di cui sopra:

 

Qui verifichiamo che la risoluzione sia maggiore di 768(Non è il caso di visualizzare elementi fissi sui piccoli schermi dei cellulari)

if (screen.width > 768)

 

In questa riga rendiamo fisso l'elemento con id "aside" che in protostar corrisponde appunto alla sidebar

jQuery("#aside").stick_in_parent({

 

Il primo parametro indica la distanza dalla parte superiore della pagina dell'elemento fisso; il secondo serve per far scorrere l'elemento indipendentemente dalla barra di scorrimento se piu' grande della finestra, il terzo se l'elemento deve esse "sganciato" quando si arriva alla fine, il quarto per assegnare una classe al DIV quando viene reso "fisso" e potergli quindi assegnare poi dei CSS personalizzati

offset_top: 10,
inner_scrolling: false,
bottoming: true,
sticky_class: \ 'stick_sidebar\'})

 

Questo codice si esegue quando si arriva al punto in cui la sidebar si deve "sganciare" e non essere piu' fissa (altrimenti coprirebbe il footer). Io avevo un disallineamento di 10px e quindi ho usato il codice sotto riportato a voi potrebbe non servire, quindi provate prima senza.

.on("sticky_kit:bottom", function(e) {
var calculated_top, self;
self = jQuery(this);
self.css(\'bottom\', \'-10px\');
});

 

Per ulteriori informazioni vi rimando alla documentazione della libreria


CommentaCommenta questo articolo sul forum

Ho scritto e condiviso questo articolo su Joomla.it, fallo anche tu. Invia ora un nuovo articolo!
Davide
Alcune informazioni su di me:
Sono un programmatore freelance con partita iva. Mi occupo principalmente della creazione di siti web e portali aziendali. Utilizzo Joomla in gran parte dei miei progetti; anche in quelli complessi scrivendo estensioni ed apportando modifiche. Collaboro (come Freelance) con web agency, colleghi o clienti finali.


Ho anche scritto:
         ✔ diventa autore su Joomla.it

Ultima versione di Joomla!®

downloadVer. 3.6.5 Stabile Italiana
Data di rilascio:14 Dicembre 2016
(leggi la notizia Demo online

Le migliori estensioni gratuite

Un elenco aggiornato con i link a più di 100 estensioni fra componenti, moduli e plugin gratuiti per Joomla! 3

Manuale in italiano

Manuale in italianoPer conoscere meglio Joomla!, le sue caratteristiche ed il metodo di utilizzo leggi il manuale tradotto in italiano.

Molto utili anche le risposte alle domande più frequenti: FAQ

Sicurezza del proprio sito Joomla!Leggi anche: Nozioni sulla sicurezza del proprio sito

Autori di articoli recenti

Invia un articolo!Scrivi un articolo su Joomla.it e ricevi i ricavi dalle pubblicità di Google Adsense!
Segui queste istruzioni, condividi e collabora con la community. L'elenco degli autori attivi sul sito.

Libri consigliati

Torna su

Joomla.it sui Social Network

JoomlaDay Italia

JoomlaDay

Newsletter

Inserisci qui la tua e.mail: