Come già per il componente Parallax, anche l’implementazione del componente Sticky all’interno del proprio sito Passweb è estremamente semplice.

Posto infatti di aver inserito tramite il layout di Pagina e/o di Variante i collegamenti a tutte le librerie css e js necessarie per il corretto funzionamento del componente, il tutto si riduce, anche in questo caso, ad assegnare l’attributo data-uk-sticky con le opzioni e i valori desiderati (in relazione al tipo di configurazione che si vuole ottenere) al Componente che si desidera ancorare al bordo superiore del viewport e, come noto, questo può essere fatto mediante l’apposito campo presente tra i parametri di configurazione di ogni componente.

E’ possibile trovare un esempio di applicazione del componente Sticky di uikit in una qualsiasi pagina del nostro modello di riferimento.

In Testata Alta è stato infatti inserito un Componente Contenitore denominato “Contenitore-Sticky” al quale è stato assegnato l’attributo data-uk-sticky con le seguenti opzioni:

data-uk-sticky="{top:-200, animation: 'uk-animation-slide-top', media: 960, clsactive: 'scroll-to-fixed-fixed'}"

Il risultato ottenuto è che:

• il “Contenitore-Sticky” (e tutti i componenti interni ad esso) si ancorerà al bordo superiore del browser non quando questo stesso componente raggiunge tale posizione ma soltanto dopo un ulteriore scrolling della pagina di 200 pixel verso il basso
• la comparsa del “Contenitore-Sticky” ancorato al bordo superiore del browser è gestita con un animazione di slide dall’alto verso il basso
• nel momento in cui il “Contenitore-Sticky” riappare ancorato al bordo superiore del browser gli verrà assegnata la classe “.scroll-to-fixed-fixed” che è stata poi utilizzata nella sezione CSS del layout di Variante per personalizzare graficamente questo elemento (e quelli interni ad esso)
• l’effetto sticky verrà disabilitato per viewport inferiori ai 640 pixel