Poziționarea lipicioasă cu nimic altceva decât CSS

Elementele de lipire, atunci când utilizatorul navighează într-un anumit punct, au devenit un model comun în designul web modern. Veți vedea că este aplicat navigării de top, bara laterală, link-uri partajate sau, eventual, anunțuri; păstrarea vizibilității în fereastra de vizualizare pe măsură ce utilizatorul scroll. 

Din punct de vedere istoric, avem nevoie de JavaScript pentru a face acest lucru. Cu toate acestea, comportamentul lipicios a fost propus (și a fost elaborat) ca un nou standard ( lipicios poziție), permițându-ne să realizăm efectul cu CSS pur. Să aruncăm o privire la modul în care funcționează!

Poziția lipicioasă

lipicios este o nouă valoare pentru poziţie proprietate, adăugată ca parte a modulului CSS3 Layout Module Spec. Acționează în mod similar rudă de poziționare, prin faptul că nu elimină nimic din fluxul de documente. Cu alte cuvinte, un element lipicios nu are efect asupra poziției elementelor adiacente și nu colapsează elementul părinte.

Având în vedere următorul exemplu, am setat #sidebar poziția la lipicios impreuna cu top: 10px. Este necesară valoarea superioară și specifică distanța de la marginea superioară a ferestrei de vizualizare unde va fi elementul băț. 

#sidebar poziție: -webkit-lipicios; // necesare pentru poziția Safari: lipicios; top: 0; // necesar, de asemenea.  

Acum, pe măsură ce derulam pagina, atunci când distanța bara laterală ajunge în partea de sus a ferestrei de vizualizare 0, bara laterală ar trebui să rămână, oferindu-ne în mod eficient o fix poziţie. Cu alte cuvinte, lipicios este un fel de hibrid între rudă și fixpoziţie.

Nesting

În plus, lipicios poziția va funcționa într-o casetă de defilare sau într-un element care se deplasează. De data aceasta vom seta top la 15px pentru a da mai mult spatiu deasupra bara laterala atunci cand este stickily poziționat (da, este un cuvânt).

Bara laterală va rămâne lipicioasă de-a lungul înălțimii părintelui (adică: atunci când partea inferioară a părintelui atinge partea inferioară a barei laterale, aceasta o va "împinge" din nou de pe pagină).

Ușor, nu-i așa??

A sustine

Dacă vizionați aceste demo-uri în Chrome, Opera sau Internet Explorer (și Blink), veți fi realizat până acum că nu funcționează. Aceste browsere nu acceptă încă lipicios valoare.

Susținerea browserului pentru poziția CSS Sticky

În Chrome 28, după ce a trecut la motorul Blink, Chrome a decis să elimine lipicios poziția de la codul său de bază, și chiar a eliminat opțiunea de a le permite prin intermediul chrome: // flags pagină. Motivul este:

"Implementarea actuală a poziției lipicioasă în Blink nu se integrează corect cu compunerea sau derularea. În cele din urmă, dorim să implementăm o poziție lipicioasă, dar implementarea actuală devine un mod de lucru pentru a îmbunătăți derularea și compoziția. Odată ce defilarea și compoziția sunt în formă mai bună, putem reintroduce poziția lipicioasă într-un mod care se integrează corect cu restul sistemului.

Odată ce alternativa este de a aplica a polyfill pentru a simula efectul în browserele non-suport.

Folosind Polyfill

Pentru a ajuta la browserele ne-suport, vom folosi stickyfill dezvoltat de Oleg Korsunsky. Polifilul funcționează frumos în diferite circumstanțe. Indiferent dacă elementul desemnat are zăbrele, margini, margini, a fost plutit sau format cu unități relative cum ar fi em și procent, poliflul va imita cu precizie CSS lipicios poziția comportamentului. Și folosirea stickyfill este la fel de intuitivă.

Pentru a începe, apucați stickyfill.js (opțional cu jQuery, dacă sunteți mai familiarizat și preferați să utilizați jQuery pentru selectarea elementelor). Conectați aceste biblioteci în documentul dvs. HTML. Apoi inițiați stickyfill cu elementul desemnat, după cum urmează:

var lateral = document.getElementById ("lateral"); Stickyfill.add (bara laterală); 

Dacă utilizați jQuery, puteți scrie următoarele:

. $ ( '# Bara laterală') Stickyfill (); 

Acum, bara noastră laterală lipitoare ar trebui să funcționeze între browsere, inclusiv Chrome și Opera. Polyfill-ul este suficient de inteligent încât să ruleze numai în browsere care nu sunt compatibile, în caz contrar acesta va fi complet dezactivat, înlăturându-se pentru implementarea nativă a browserului.

caveats

Există câteva alte lucruri pe care trebuie să le notați înainte să luați plonjorul și să îl utilizați lipicios poziție pe site-urile dvs.:

• În primul rând, înălțimea containerului părinte trebuie să fie mai mare decât elementul lipicios.
• În timp ce Safari suportă nativă poziția CSS lipicioasă (deși prefixată), aceasta nu va intra în vigoare atunci când poziția lipicioasă este utilizată sub un element cu CSS afișare: tabel;. Acesta este un bug.
• Polyfill-ul are propriile sale neajunsuri, deoarece nu va funcționa într-o cutie plină.
• La momentul redactării, nu există nici un manipulator de evenimente JavaScript pentru lipicios pentru a identifica când este elementul blocat. Asa un eveniment ar putea fi utilă, de exemplu, pentru a adăuga clase suplimentare atunci când elementul este stickificat (care ar putea să nu fie un cuvânt).

Gânduri închise

Poziția CSS lipicios ar putea fi un instrument strălucit dacă aveți nevoie pur și simplu de un element simplu lipicios. Dacă nevoia ta crește dincolo de faptul că, deși vrei să adaugi niște efecte fantastice asupra elementului lipicios, vei fi mai bine să optezi pentru o bibliotecă JavaScript ca Waypoints.js cu modulul său lipicios.

Cu toate acestea, sperăm să vedem câteva îmbunătățiri majore pentru CSS, atât în ​​ceea ce privește capacitatea, cât și suportul pentru browser, foarte curând.

Alte referințe

• De ce (Sticky) JS nu este ideal?
• Proiect de lucru CSS lipicios
• Sfat rapid: Navigare lipicioasă, fără saltul groaznic de Adi Purdila

Aflați CSS: Ghidul complet

Am creat un ghid complet care să vă ajute să învățați CSS, indiferent dacă începeți doar cu elementele de bază sau doriți să explorați CSS mai avansat.