Bloccato in cima!

Avete mai visto qualche pagina web che ha dei “pezzi” che si spostano in alto durante lo scrolling, ma che si bloccano al limite del bordo superiore al momento in cui ci arrivano, rimanendo sempre visibili?

Un esempio si ha di questi tempi, quando facendo una ricerca in Google ci appare di fianco ai risultati anche una piccola mappa…

Non si tratta del solito ‘position:fixed‘ perché altrimenti all’inizio non (scrollerebbero) si muoverebbero assieme al resto della pagina?

Allora com’è che funzione questo meraviglioso effetto?
Si tratta di usare un po’ di javascript!

<script>
window.onscroll = function () {
scrollpos = (document.documentElement.scrollTop || document.body.scrollTop)
if (scrollpos > 100) { /* blocca */
document.getElementById('nav').style.position = "fixed";
document.getElementById('nav').style.top = "0px";
} else { /* scrolla */
document.getElementById('nav').style.position = "absolute";
document.getElementById('nav').style.top = "100px";
}
}
</script>

Per prima cosa dobbiamo incasellare il nostro “pezzo” all’interno di un elemento html con un preciso ID, che nel mio esempio è un DIV ho chiamato ‘nav‘ (riportato 4 volte); poi dobbiamo sapere quanto dista il nostro elemento dal bordo superiore della pagina (nell’esempio: 100, riportato 2 volte).
Infine mettiamo il codice nell’head della pagina.

Come funziona?

Lo script si attiva allo scrolling della pagina, e si accorge di quanto la pagina è stata scrollata, facendo si che il nostro elemento si posizioni in maniera ‘absolute‘ alla distanza che abbiamo indicato (100px), e scrolla con il resto della pagina.

Quando la pagina risulta scrollata oltre i 100px, il posizionamento dell’elemento diventa ‘fixed‘ a 0px dal bordo, cioè si blocca in alto.

Il valore da personalizzare è quindi la distanza dell’elemento dal bordo superiore della pagina.

Infine, ecco un collegamento interessante, per un approfondimento ‘laterale‘.

jQuery

Esiste anche un plugin per jQuery che permette di riprodurre lo stesso tipo di comportamento.

Si tratta di Waypoints, che oltre a produrre l’effetto di un DIV fisso in alto ha anche altre 3 opzioni: scroll infinito della pagina, track dei banner e ‘dial controls’.

CSS: sticky

Con i recenti aggiornamenti di CSS è saltato fuori una nuovaregola:

position:sticky;

Questo nuovo valore del vecchio position permette di replicare tutto quello di cui ho parlato prima con un solo comando Css, e anche meglio, perchè funziona agevolmente su più elementi nella stessa pagina, e rispetto al metodo descritto prima questo si “spegne” una volta che non serve più.

Per l’approfondimento vi rimando qui.

4 pensieri su “Bloccato in cima!”

  1. Volendo si potrebbe applicare ad una classe? in quanto gli elementi sono all’interno di un if….
    e se si come si fa?
    ho provato a sostituire
    document.getElementById
    con
    document.getElementsByClassName
    ma non ha funzionato…
    grazi per l’aiuto
    Rob

  2. Grandissimo! L’hai scritto più di tre anni fa ma mi è venuto utilissimo anche oggi, perchè il position:sticky su explorer ed edge ancora non funziona 🙁

Rispondi a rob Annulla risposta

Il tuo indirizzo email non sarà pubblicato.

You can add images to your comment by clicking here.