Fissare un elemento della pagina web che resti costantemente in vista.

Semplice plugin che permette di fissare" elemento in una pagina web nella parte superiore della finestra in modo che resti costantemente al suo posto anche durante lo scroling della pagina.

"

 

Utilizzo.

Passo 1. Collegare jQuery.

<script src="/js/stickUp.min.js"></script>

 

Passo 2. Applicare il plugin all'elemento desiderato con la classe appartinente.

Per esempio:

<script type="text/javascript">
    jQuery(function($) {
        $(document).ready( function() {
            //attivare stickUp ad elemento con la classe '.navbar-wrapper'
            $('.navbar-wrapper').stickUp();
        });
    });
</script>

Questo e tutto!

Opzioni aggiuntive.

Se abbiamo una grande pagina, diviza in sezioni, possiamo organizzare gli elementi di commutazione di classe per simulare il menu di navigazione. Per esempio, vedere la demo.

     Per prima cosa dobbiamo creare le partizioni necessarie. Ad esempio con il div.
     Poi ad ogni div-assegnare il suo id.
     E quindi applicare il plugin:

 

<script type="text/javascript">
    jQuery(function($) {
        $(document).ready( function() {
            $('.navbar-wrapper').stickUp({
                parts: {
                    0:'home',
                    1:'features',
                    2: 'news',
                    3: 'installation',
                    4: 'one-pager',
                    5: 'extras',
                    6: 'wordpress',
                    7: 'contact'
                },
                itemClass: 'menuItem',
                itemHover: 'active'
            });
        });
    });
</script>

itemClass: classe, che sara assegnato a ciascun elemento della navigazione.

itemHover: classe, che sara assegnato al elemento attivo della navigazione.

Fonte lezione:http://lirancohen.github.io/stickUp/

Letto 1433 volte