Posizionamento appiccicoso con nient'altro che CSS

Attaccare gli elementi, quando l'utente scorre fino a un certo punto, è diventato un modello comune nel web design moderno. Lo vedrai applicato alla navigazione in alto, alla barra laterale, ai link di condivisione o forse alla pubblicità; mantenendo la visibilità all'interno del viewport mentre l'utente scorre. 

Storicamente avevamo bisogno di JavaScript per farlo. Tuttavia, il comportamento appiccicoso è stato proposto (e redatto) come un nuovo standard (il appiccicoso posizione), permettendoci di ottenere l'effetto con puro CSS. Diamo un'occhiata a come funziona!

Posizione appiccicosa

appiccicoso è un nuovo valore per il posizione proprietà, aggiunta come parte della specifica del modulo di layout CSS3. Agisce in modo simile a parente posizionamento, in quanto non rimuove nulla dal flusso del documento. In altre parole, un elemento appiccicoso non ha alcun effetto sulla posizione degli elementi adiacenti e non collassa il suo elemento genitore.

Dato il seguente esempio, impostiamo il #sidebar posizione a appiccicoso insieme a inizio: 10px. Il valore superiore è richiesto e specifica la distanza dal bordo superiore della finestra in cui verrà posizionato l'elemento bastone. 

#sidebar position: -webkit-sticky; // richiesto per la posizione Safari: appiccicoso; inizio: 0; // richiesto pure.  

Ora, mentre scorriamo la pagina, quando raggiunge la distanza della barra laterale dalla parte superiore della finestra 0, la barra laterale dovrebbe incollarsi, dandoci effettivamente un fisso posizione. In altre parole, il appiccicoso è una sorta di ibrido tra parente e fissoposizione.

annidamento

Inoltre, il appiccicoso la posizione funzionerà all'interno di una casella di scorrimento o di un elemento traboccante. Questa volta imposteremo il superiore a 15px per dare più spazio sopra la barra laterale quando è stickily posizionato (sì, questa è una parola).

La barra laterale rimarrà appiccicosa per tutta l'altezza del genitore (cioè: quando il fondo del genitore raggiunge la parte inferiore della barra laterale, lo "sposterà" ancora una volta dalla pagina).

Facile, no??

Supporto

Se stai visualizzando queste demo in Chrome, Opera o Internet Explorer (e Blink), avrai ormai capito che non funzionano. Questi browser non supportano ancora il appiccicoso valore.

Supporto del browser per la posizione Sticky CSS

In Chrome 28, quando è passato al motore Blink, Chrome ha deciso di rimuovere il appiccicoso posizione dal suo code-base e ha persino rimosso l'opzione per abilitarlo attraverso il chrome: // flags pagina. Il motivo è:

"L'attuale implementazione di position sticky in Blink non si integra correttamente con il compositing o lo scrolling. Alla fine vogliamo implementare la posizione appiccicosa, ma l'implementazione attuale sta ottenendo il modo di lavorare per migliorare lo scorrimento e il compositing. Una volta che lo scorrimento e il compositing sono in una forma migliore, possiamo reintrodurre la posizione appiccicosa in un modo che si integri correttamente con il resto del sistema.

Una volta l'alternativa è applicare a polyfill per simulare l'effetto nei browser non di supporto.

Utilizzando il Polyfill

Per aiutare i nostri browser non di supporto utilizzeremo stickyfill sviluppato da Oleg Korsunsky. Il polyfill funziona bene in varie circostanze. Se l'elemento designato ha spaziatura, margini, bordi, è stato flottato o formato con unità relative come em e percentuale, il polyfill simulerà accuratamente il CSS appiccicoso comportamento di posizione. E usare stickyfill è ugualmente intuitivo.

Per iniziare, prendi stickyfill.js (opzionalmente con jQuery, se hai più familiarità con e preferisci usare jQuery per selezionare gli elementi). Collega queste librerie all'interno del tuo documento HTML. Quindi avviare stickyfill con l'elemento designato, come segue:

var sidebar = document.getElementById ('sidebar'); Stickyfill.add (barra laterale); 

Se si utilizza jQuery, è possibile scrivere quanto segue:

. $ ( '# Sidebar') Stickyfill (); 

Ora, la nostra barra laterale adesiva dovrebbe funzionare su browser come Chrome e Opera. Il polyfill è abbastanza intelligente da funzionare solo con browser non di supporto, altrimenti sarà completamente disabilitato, facendo da parte per l'implementazione nativa del browser.

Avvertenze

Ci sono un paio di altre cose da notare prima di fare il grande passo e usare appiccicoso posizione sui tuoi siti web:

• Innanzitutto, l'altezza del contenitore genitore dovrebbe essere maggiore dell'elemento adesivo.
• Mentre Safari supporta nativamente la posizione appiccicosa del CSS (anche se prefissato), non entrerà in vigore quando la posizione appiccicosa viene utilizzata sotto un elemento con CSS display: tabella;. Questo è un bug.
• Il polyfill ha i suoi difetti, in quanto non funzionerà all'interno di una casella overflow.
• Al momento della scrittura, non esiste alcun gestore di eventi JavaScript per sticky per identificare quando l'elemento è incollato. Come un evento potrebbe essere utile, ad esempio, per aggiungere classi aggiuntive quando l'elemento è incollato (che potrebbe non essere una parola).

Pensieri di chiusura

La posizione appiccicosa dei CSS potrebbe essere uno strumento geniale se hai semplicemente bisogno di un semplice elemento appiccicoso. Se il tuo bisogno cresce oltre a quello - se vuoi aggiungere alcuni effetti di fantasia sull'elemento appiccicoso - starai ancora meglio optando per una libreria JavaScript come Waypoints.js con il suo modulo appiccicoso.

Ciononostante, speriamo di vedere alcuni importanti miglioramenti ai CSS appiccicosi, per quanto riguarda la sua capacità e il supporto del browser, molto presto.

Ulteriori riferimenti

• Perché (appiccicoso) JS non è l'ideale?
• Draft di lavoro Sticky CSS
• Suggerimento rapido: navigazione appiccicosa, senza il salto imbarazzante di Adi Purdila

Scopri CSS: la guida completa

Abbiamo creato una guida completa per aiutarti a imparare i CSS, se hai appena iniziato con le nozioni di base o se vuoi esplorare CSS più avanzati.