Position Sticky CSS: guida all’uso [video]

18 Gennaio 2020 Simone Baldassin pillole formative

Le regole di CSS si evolvono di giorno in giorno, mese in mese, anno dopo anno inesorabilmente, che ve lo dico a fare? Inutile pertanto stare a cincischiare, la parola d’ordine è sempre la stessa:

never stop learning!

Oggi vediamo una delle nuove proprietà che possiamo utilizzare per il posizionamento dei nostri elementi HTML all’interno del flusso del codice ovvero il position: sticky

Questa proprietà ci permette di bypassare allegramente l’utilizzo di jQuery per poter andare ad agganciare letteralmente il blocco Header o il menù del nostro sito ad inizio pagina durante lo scroll della stessa.

Dobbiamo però, ovviamente, essere consapevoli della retro compatibilità, l’esercizio che andiamo a svolgere nel video di seguito infatti non ha nessun supporto su IE e supporto parziale su Edge.

Support Browser Sticky

Insomma, Windows, come spesso accade, ci costringe ad utilizzare le novità con le pinze.

Ma bando alle ciance e ai sentimentalismi post traumatici da dopo abbuffate natalizie ed immergiamoci seduta stante nel codice.

Per poter realizzare l’esercizio proposto nel video vi invito a scaricare prima questa cartella starter contenente tutti gli assets necessari dopodiché non mi rimane che augurarvi buona visione e buon codice.

GUARDA IL VIDEO

 

Ancora nessun commento

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *