Il componente Sticky di uikit può essere disabilitato in corrispondenza di certe dimensioni del viewport in modo tale, ad esempio, che un dato elemento resti ancorato al bordo superiore del browser solo per schermi di grandi dimensioni, mentre su smartphone o tablet continui a comportarsi normalmente seguendo, come tutti gli altri elementi, lo scrolling della pagina.

Per fare questo e sufficiente utilizzare l’opzione “media” dell’attributo data-uk-sticky indicando esattamente le dimensioni del viewport al di sotto delle quali l’effetto sticky dovrà essere disabilitato.

Facendo quindi riferimento ad un markup di questo tipo:

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

otterremo che la div “elemento-sticky” resterà effettivamente ancorata alla parte superiore del browser solo per viewport di dimensioni maggiori di 640 pixel

Oltre alla dimensione del viewport l’effetto sticky può essere condizionato anche ad una qualsiasi altra media-query che dovrà essere indicata per l’attributo data-uk-sticky, come valore dell’opzione media.

Facendo quindi riferimento ad un markup di questo tipo:

<div id=”elemento-sticky” data-uk-sticky="{media: '(min-width: 640px) and (orientation: landscape)'}>...</div>

otterremo che la div “elemento-sticky” resterà effettivamente ancorata alla parte superiore del browser solo per viewport di dimensioni maggiori di 640 pixel e solo nel caso in cui questi siano orientati in modalità landscape.