Su molti siti web – incluso HTML5 Today – si vedono barre laterali che si bloccano allo scroll della pagina, per poi ricominciare magicamente a scorrere quando lo scroll arriva ad un certo punto, in alto o in basso. In questo tutorial vedremo come ottenere questo risultato con un po' di CSS e un pizzico di jQuery.

In sostanza quello che vogliamo ottenere è questo:

Come potete vedere, quando aprite un articolo su HTML5 Today a sinistra c'è il contenitore dei bottoni social. Allo scroll della pagina il DIV scorre fino in cima e poi si ferma, restando fisso fino a quando non scorrete di nuovo la pagina per riportarla in alto (in quel caso torna al suo posto originario).

Come ottenere un effetto del genere? Con un po' di CSS e un pizzico di jQuery, no! :)

HTML e CSS

Partiamo dall'HTML e dal CSS di una pagina con una struttura tipo questa:

Creiamo una struttura del genere:

<div id="contenitore"><br />  <div id="corpo"></div><br />  <div id="menu"></div><br /></div>

e un CSS come questo:

#contenitore {<br />  width: 900px;<br />  margin: auto;<br />}<br /><br />#corpo {<br />  width: 600px;<br />  margin: 10px;<br />  float: left;<br />}<br /><br />#menu {<br />  margin: 10px;<br />  float: right;<br />}

Creiamo anche una class, che chiameremo "fissa", che ha la caratteristica di essere fissa (cioè di non scrollare con il resto della pagina) e ancorata esattamente in alto, cioè a "top" uguale a zero:

.fissa {<br />  position: fixed;<br />  top: 0px;<br />}

Bene, il nostro HTML e CSS è tutto qua. Adesso passiamo al jQuery.

jQuery

L'idea di base di questo "trucchetto" è di agganciarsi all'evento "scroll", ovvero a quell'evento che viene richiamato quando la pagina viene fatta scorrere (con la rotella del mouse, col dito su tablet e smartphones o trascinando la barra di scorrimento). Ad ogni scroll si controllerà di quanto la pagina ha "scrollato": se la posizione è maggiore della posizione del nostro div fisso bisognerà bloccarlo (aggiungendo la classe "fissa"), in caso contrario lo si potrà far scorrere e basterà togliere la classe "fissa".

Vediamo il codice:

$(document).ready(function() {<br />  var menu = $("#menu");<br />  var posizione = menu.position();<br /><br />  // intercettiamo qui l'evento "scroll"                 <br />  $(window).scroll(function() {<br />    // "$(window).scrollTop()" ci dice di quanto abbiamo scrollato la pagina<br />    if ($(window).scrollTop() >= posizione.top) {<br />      // abbiamo scrollato oltre il div, dobbiamo bloccarlo<br />      menu.addClass("fissa");<br />    } else {<br />      // abbiamo scrollato verso l'alto, sopra il div, possiamo sbloccarlo<br />      menu.removeClass("fissa"); <br />    }<br />  });<br />});

E questo è quanto. Ovviamente poi possiamo divertirci ad esempio facendolo ripartire quando si scrolla oltre un certo punto (per non farci finire sopra un eventuale footer) ma il principio è sempre lo stesso.

Come al solito, se avete domande o dubbi usate i nostri commenti e, visto che ci siamo, condividete questo articolo usando il nostro div (fisso) sulla sinistra! :)

The following two tabs change content below.
Silvio Porcellana
Silvio Porcellana è il fondatore di mob.is.it, il tool che centinaia di agenzie e professionisti di tutto il mondo utilizzano per creare con semplicità siti mobili e applicazioni native per i loro clienti. Tiene anche un podcast dove racconta ogni venerdì le sue avventure imprenditoriali, senza veli o segreti: Opus Digitalis