Come evidenziato nel precedente capitolo per poter implementare correttamente il componente Sticky di uikit è necessario caricare all’interno del sito, oltre alla parte core del framework (uikit.css e uikit.js) anche le librerie css e js utilizzate in maniera specifica da questo componente.

La prima cosa da fare sarà quindi verificare di aver inserito nella sezione < head > della pagina in cui sui vuol implementare questo componente il collegamento alle librerie sticky.css e sticky.js (o meglio ancora alle loro versioni minificate)

<link rel="stylesheet" href="uikit.css" />

<link rel="stylesheet" href="sticky.css" />

<script src="uikit.js"></script>

<script src="sticky.js"></script>

ATTENZIONE! La libreria sticky.js deve necessariamente essere caricata dopo la libreria uikit.js

Fatto questo, per fare in modo che un dato elemento rimanga ancorato alla parte alta della finestra del browser, sarà sufficiente assegnare a questo stesso elemento l’attributo data-uk-sticky

Nella configurazione di base quindi il markup al quale fare riferimento sarà, molto semplicemente, il seguente:

<div id=”elemento-sticky” data-uk-sticky>...</div>

In questa condizioni, quando la div “elemento-sticky” raggiungerà la parte alta della pagina si ancorerà al bordo superiore senza più seguire il resto della pagina.