Oggi vediamo come rendere la nostra sidebar o box in evidenza (sticked) durante lo scroll della pagina grazie a jQuery. Un ottimo modo per mettere in evidenza prodotti o elementi della nostra User Interface durante lo scrolling della pagina.
Il plugin si chiama stickem ed è perfetto per tutti coloro che cercano qualcosa di facile e veloce da applicare.
Implementazione dello script
Per usare lo script basta inserire, (oltre alle classiche librerie jQuery) il file di stickem:
<script src="js/stickem.js"></script>
Una volta collegata la libreria, inizializziamo il plugin in questo modo (il codice è ovviamente da inserire dentro il dom document.ready):
$('.container').stickem();
Container è il wrap del vostro sito, comunica al plugin quali elementi prendere in considerazione.
A questo punto vi basterà applicare nell’html le seguenti classi a due differenti elementi del vostro sito:
stickem-container — >contenitore oltre il qualche l’elemento smette si essere sticked.
stickem –>elemento da rendere sempre fisso (sidebar, box etc).
Conclusioni
[button link=”http://davist11.github.com/jQuery-Stickem/” color=”blue” target=”blank” size=”large”]Download[/button]
Un ottimo script per rendere fixed la vostra sidebar o box, ideale per migliorare la vostra User experience. Facile e veloce, consigliato!
La cosa interessante di sticker è che permette di avere un box fisso per ogni livello, l’esempio della pagina del plugin è lampante.
Quello che non mi piace, ma è tipico di tutti i listati in javascript che bloccano lo scrolling di un oggetto nella pagina è il rimbalzo che si ha quando si inizia a fare lo scrolling.
Personalmente per avere lo stesso effetto preferisco i fogli di stile ( elemento {position: fixed} ) purtroppo non è supportato in Internet Explorer almeno fino alla versione 7 e dalla 8 solo se la pagina lavora in compliand mode. Una vera seccatura.
Ci sono ovviamente dei workaround per farlo lavorare comunque, vedi sul sito tagsoup: Fixed position , comunque io credo che la scelta di un metodo o dell’altro dipenda dal contesto, fermo restando, che sono contrario al proliferare incontrollato del javascript nelle pagine a volte è necessario.
CiauZ M.