Elemento fisso allo scroll con jQuery Waypoints

Corso jQuery
Creare applicazioni client-side col Framework jQuery

Scritto da Luca Ruggiero nella sezione Javascript

Waypoints è un semplice, ma utile plugin di jQuery per la gestione degli eventi legati allo scroll di pagina. Alcuni esempi di quel che Waypoints consente di fare è il caricamento di elementi solo quando l'utente scorre la nostra pagina, piuttosto che lasciare fisso un header od un banner nonostante lo scroll di pagina.

Esamineremo proprio quest'ultimo caso, ma per prima cosa va chiarito che, al caricamento della pagina, se l'elemento si trova in secondo scroll ci rimane fin quando l'utente non arriva a visualizzarlo scorrendo la pagina: Waypoints ci permette di "fermare" quell'elemento, mantenendolo fisso fisso allo scroll di pagina.

Per prima cosa effettuiamo il download di Waypoints (in versione 2.0.4) cliccando qui e copiando il codice presente nella pagina, per salvarlo quindi nel file jquery.waypoints.js nella nostra cartella di esempio.

Creiamo adesso una pagina HTML che contenga del contenuto testuale molto lungo (una serie di "bla bla bla" inseriti in dei paragrafi vanno più che bene). Qundi, più o meno al centro di questo lungo contenuto, inseriamo il nostro "elemento fisso", che sarà un banner o qualsiasi altro elemento ci interessi fissare nonostante lo scroll della pagina:

<div id="fisso" style="background: #AAA; width: 300px; padding: 10px;">ELEMENTO FISSO</div>

Impostiamo un ID all'elemento, ad esempio "fisso". Creiamo quindi una clase CSS che, tuttavia, non ci serve ancora:

.fisso { position: fixed; top: 10px; }

Richiameremo questa classe allo scroll di pagina utilizzando Waypoints: il suo scopo è quello di fissare l'elemento, lasciando un minimo di spazio rispetto al margine superiore della pagina.

Passiamo alla fase Javascript della nostra piccola applicazione, includendo per prima cosa la libreria jQuery, quindi Waypoints:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.waypoints.js"></script>

Non ci resta che inserire, nell'evento che gestisce il caricamento della pagina, la chiamata alla funzione che gestisce lo scroll di pagina e fa quel che vogliamo, ossia fissare il nostro elemento:

$(document).ready(function() {
    $("#fisso").waypoint(function(d) {
        if (d == "down") {
            $(this).addClass("fisso");
        } else {
            $(this).removeClass("fisso");
        }
    });
});

Controlliamo la direzione dello scroll e, se va verso il basso (utilizzando come right value la costante "down"), chiamiamo la nostra classe CSS che fissa l'elemento, altrimenti (se lo scroll va verso l'alto), rimuoviamo la classe e blocchiamo nuovamente l'elemento nel posto in cui è presente al caricamento della pagina.

Facciamo un piccolo passo indietro ed implementiamo il codice Javascript in modo da fare a meno della classe CSS creata in precedenza:

$(document).ready(function() {
    $("#fisso").waypoint(function(d) {
        if (d == "down") {
            $(this).css("position", "fixed");
            $(this).css("top", "10px");
        } else {
            $(this).css("position", "relative");
            $(this).css("top", "0");
        }
    });
});

Usando esattamente due righe di codice in più in tutto lo script, stilizziamo "al volo" l'elemento in fase di discesa, quindi lo priviamo degli stili in risalita, invece di aggiungere ed eliminare dinamicamente la classe di stile.

Differenze? Nessuna.

I più cliccati della sezione Javascript

:: jQuery Validation: validazione di un form con jQuery (107.883)

:: Breve guida a jQuery (98.555)

:: Le espressioni regolari in Javascript (84.978)

:: Gestione delle stringhe in Javascript (74.955)

:: Stampare una pagina col Dhtml (42.844)

:: Inserire in automatico lo slash nel formato data gg/mm/aaaa (41.562)

:: Menu orizzontale dinamico in Dhtml (37.180)

:: Gli Array in Javascript (35.935)

:: Temporizzazioni Javascript (31.612)

:: Istruzion condizionali in Javascript: if e switch (28.931)

IN EVIDENZA
DOWNLOAD