Sticky box – Come creare un box che resti sempre in evidenza durante lo scroll della pagina

 

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.

Dopodicchè semplicemente aggiungiamo la seguente classe nel nostro foglio di stile css.

Infine al nostro contenitore che vogliamo rendere “adesivo” aggiungiamo prima la classe chiamata sticky-scroll-box, esempio:

ed all’interno della vostra pagina, meglio prima della chiusura del tag </BODY>, inseriamo il seguente codice:

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
pixolo ads
Cambia Copertina
6555 | Articolo pubblicato 3 anni fa nella categoria In evidenza, jQuery - Javascript.
Puoi seguire tutti i nuovi articoli e gli aggiornamenti di Pixolo.it attraverso i Pixolo feeds feed RSS.
Puoi inoltre lasciare un commento, oppure fare un trackback dell'articolo dal tuo sito.
16
SHARES
Be Sociable,
share and enjoy!
Resta aggiornato!
Segui Pixolo anche su Facebook!
Don't show more - I am already fan
×
Salva il post su Facebook
What is a Facebook Save Button?

The save button lets you save the current page to your private list on Facebook for a future use or consultation.
info | close
×