Corsi on-line

Elementi fissi allo scrolling della pagina

Uno degli effetti che si vede più di frequente consiste nella presenza di alcuni elementi “fissi” nella pagina che, cioè, non vengono influenzati dall’eventuale scroll degli altri contenuti. Questa tecnica è particolarmente utile per lasciare sempre ben visibili alcuni contenuti di primaria importanza, come, ad esempio, un menu o, più banalmente, uno spot pubblicitario.

Per realizzare questo tipo di effetto è possibile, molto semplicemente, ricorrere alla proprietà position dei CSS con valore fixed (si veda, ad esempio, il menu proposto in questo articolo). L’utilizzo di questa proprietà è il seguente:

.fisso {
  position: fixed
}

o, addirittura, utilizzare degli effetti javascript in grado di creare maggior spettacolarità attivando e disattivando il blocco/scorrimento dell’elemento al verificarsi di talune circostanze. Un effetto piuttosto carino, ad esempio, è quello che consente di attivare il position:fixed solo nel momento in cui l’elemento sta per uscire dalla pagina a seguito di uno scroll dell’utente. In pratica, quindi, l’elemento segue, in un primo momento, il normale scrolling di pagina, per poi cambiare stato nel momento in cui lo scrolling ne stia compromettendo una piena visualizzazione.

Per ottenere effetti del genere è possibile utilizzare alcuni plugin per jQuery come jQuery Sticky Scroller oppure Contained Sticky Scroll. Quest’ultimo, in particolare, aggiunge alla funzionalità descritta una gradevole animazione e la possibilità di limitare lo scroll all’interno di un contenitore.

Particolarmente interessante, infine, il plugin jQuery Waipoints (di cui abbiamo già parlato in questo post) che consente, tra le altre cose, di creare sticky elements che si attivano allo scroll della pagina.

Post correlati
I più letti del mese
Tematiche