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.
Utile, proprio quello che stavo cercando.
Grazie mille.
Grazie! Ho fatto la mia bella fatica per riuscire a recuperarlo 😉
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
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 🙁