Nel caso in cui l’esigenza dovesse essere quella di ancorare un dato elemento non esattamente al bordo superiore del viewport ma più in basso rispetto ad esso, è possibile utilizzare sull’attributo data-uk-sticky l’opzione top indicando anche a quanti pixel dal bordo superiore del viewport dovrà essere ancorato l’elemento in questione.

Facendo quindi riferimento ad un markup di questo tipo

<div id=”elemento-sticky” data-uk-sticky="{top:100}">...</div>

otterremo che la div “elemento-sticky” resterà ancorata ad una distanza di 100 pixel dal bordo superiore della finestra del browser

Un’altra opzione interessante del componente Sticky di uikit è quella che consente di ancorare un dato elemento al bordo superiore del viewport o ad una certa distanza rispetto ad esso, non immediatamente nel momento in cui l’elemento in questione raggiunge quella posizione, ma soltanto dopo aver effettuato un ulteriore scrolling di N pixel.

Per fare questo è sufficiente assegnare all’opzione top un valore negativo.

Facendo quindi riferimento al markup di seguito indicato

<div id=”elemento-sticky” data-uk-sticky="{top:-200}">...</div>

otterremo che la div “elemento-sticky” resterà ancorata al bordo superiore del viewport. L’ancoraggio però non avverrà subito, ossia esattamente nel momento in cui questo elemento arriverà a toccare il bordo superiore del viewport, ma soltanto dopo aver effettuato un ulteriore scrolling di 200 pixel verso il basso.

La div “elemento-sticky” potrebbe, quindi, anche scomparire totalmente dall’area di visualizzazione del viewport per poi ricomparire, ancorata al bordo superiore, nel momento in cui la pagina scorrerà verso il basso di altri 200 pixel.

In queste condizioni, infine, potrebbe essere interessante gestire la “ricomparsa” della div “elemento-sticky” mediante un’animazione.

Per questo è possibile utilizzare una qualsiasi animazione definita per il componente “Animation” di uikit (http://getuikit.com/docs/animation.html ) indicando il nome dell’animazione da utilizzare come valore per l’opzione “animation” dell’attributo data-uk-sticky

Il markup al quale fare riferimento in queste condizioni sarà dunque il seguente:

<div id=”elemento-sticky” data-uk-sticky="{top:-200}, animation: 'uk-animation-slide-top'}">...</div>