Sticky box – In questo post vedremo come creare con molta semplicità e senza nessun plugin un utile “sticky box“, ovvero box che resti sempre in evidenza durante lo scroll di una pagina web. Questo contenitore, che può essere un’intera sidebar o qualsiasi altro box di contenuti a nostro piacimento risulterà molto utile in pagine con un’altezza rilevante in modo che il visitatore, nello scrollare i contenuti della pagina, avrà sempre visibile il box “adesivo” o “sticky box” che andremo ad impostare.
Sticky box – L’Implementazione
Per prima cosa dobbiamo assicurarci di avere caricato la libreria jQuery all’interno del tag HEAD della pagina.
1 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=3.4.1"></script> |
Dopodicchè semplicemente aggiungiamo la seguente classe nel nostro foglio di stile css.
1 2 3 4 5 |
.fixed { position:fixed; top:0; z-index:99999; } |
Infine al nostro contenitore che vogliamo rendere “adesivo” aggiungiamo prima la classe chiamata sticky-scroll-box, esempio:
1 2 3 |
<div class="sticky-scroll-box"> Qui il contenuto del nostro box............ </div> |
ed all’interno della vostra pagina, meglio prima della chiusura del tag </BODY>, inseriamo il seguente codice:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script type="text/javascript"> $(document).ready(function () { var top = $('.sticky-scroll-box').offset().top; $(window).scroll(function (event) { var y = $(this).scrollTop(); if (y >= top) $('.sticky-scroll-box').addClass('fixed'); else $('.sticky-scroll-box').removeClass('fixed'); $('.sticky-scroll-box').width($('.sticky-scroll-box').parent().width()); }); }); </script> |
Ed ecco fatto! Non vi resta che provare la demo per vedere il risultato finale.
Buon lavoro e ricorda che puoi seguire tutte le nuove risorse gratuite proposte di continuo da Pixolo anche su Facebook, Google+, Twitter e Pinterest !!!
DEMO Sticky box