Două stări
Ca și în cazul celor mai multe trucuri bune, nu este nimic neobișnuit. Tot ce trebuie să facem este să gândim (și să creăm un design) două stări posibile:
Câmp de căutare când derulați o pagină
Curs practic pe aterizare adaptivă de la zero!
Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile
Câmpul de căutare este fixat în antetul paginii
Schimbăm între ele doar schimbând numele clasei. Și nu este nimic în neregulă cu a avea două câmpuri de căutare care sunt afișate numai atunci când un anumit script este executat. Acesta este un contrast bun, pentru că Nu vrem să facem calcule complexe pentru a le sincroniza. Este mult mai ușor să gestionați un singur element.
Prima stare
(Voi folosi SCSS aici, pentru că este bine să folosiți elemente de cuibărit pentru managementul de stat).
A doua stare
Cu condiția să adăugăm clasa .fix-search la elementul parent.
Schimbarea de stat
Asta e tot ce trebuie pentru a comuta între cele două stări pe care le-am desemnat. Dacă pagina a fost derulată cu 147 de pixeli sau mai mult, clasa specificată va fi atribuită elementului. Dacă nu se întâmplă acest lucru, clasa nu este atribuită. Chiar dacă defilați în jos și apoi mergeți înapoi, clasa însăși va fi ștearsă (deoarece această funcție mică este apelată la fiecare eveniment derulant).
Curs practic pe aterizare adaptivă de la zero!
Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile
Configurați restricțiile
Ca urmare a unei tradiții comune, atunci când este vorba de a stabili limite în timpul derulării (ori de câte ori în exemplul demo este legarea unui eveniment cu un eveniment de defilare), trebuie să spun următoarele: ar trebui să se gândească la stabilirea unor limite. când asociați o funcție cu derularea evenimentelor, pentru că dacă nu o faci, funcția va fi apelată de nenumărate ori și poate funcționa foarte încet.
Acesta este exact ceea ce ar fi bine sa facem pe CSS pur. Capul meu încă până când nu a fost nici o decizie mare, dar nu pot ajuta întrebam lucrurile teribil pe care alți oameni fac în CSS, așa că, dacă am ceva vine în minte, sunt sigur că va actualiza acest articol. Poate că într-o bună zi vom putea controla deplasarea prin solicitările mass-media?
Suport fix de poziționare
Rețineți că această demonstrație se bazează pe o poziționare fixă, care are o reputație slabă în domeniul creării de machete pentru dispozitivele mobile. În timp ce am tendința de a spune că are suficient sprijin suficient în acest moment, alegerea este în continuare a ta. Citirea pe subiect:
Pot folosi ... site-ul pe poziționare fixă
Acesta este doar un exemplu (nu este potrivit, în special, pentru utilizarea omniprezentă)
Poate că folosirea unei anumite versiuni a punctelor de conectare (sau a ideii însăși) va crea o soluție mai durabilă.
Ediție: Comanda webformself.
Curs practic pe aterizare adaptivă de la zero!
Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile
Cele mai recente știri despre dezvoltarea IT și web pe canalul nostru de telegrame
Practicați HTML5 și CSS3 de la zero la rezultatul!
Trimiteți-le prietenilor: