Cum se creează Footer Sticky numai pentru CSS
În mod normal, avem nevoie de JavaScript efectuați efecte de derulare legate de diferite acțiuni ale utilizatorilor pe paginile web. Scenariul face treaba urmărind cât de departe deplasează în sus sau în jos o pagină, și declanșează o acțiune când se atinge o înălțime a pragului.
Nu este un lucru deosebit de rău să folosiți JavaScript pentru efectele derulării. De fapt, există cazuri mai complicate care sunt imposibil de rezolvat fără JavaScript. Totuși, există CSS hacks care poate înlocui uneori aceste scripturi.
Această postare vă va arăta how pentru a crea footer dezvăluie efecte în pagina de defilare folosind CSS. Vom folosi două cazuri de utilizare pentru a demonstra acest lucru: unul pentru întreaga pagină (a se vedea demo) și unul pentru elemente de pagină individuale, cum ar fi articole.
Pagină plină
Trebuie să creăm un subsol apare de sub pagina în timp ce utilizatorul se derulează în jos. De asemenea, când defilază pagina înapoi, subsolul trebuie să fie fi ascuns sub din nou pagina.
Pentru a atinge acest obiectiv, mai întâi trebuie să creați o subsol cu poziție fixă în partea de jos a ecranului.
1. Creați un subsol fix
hai adăugați conținut și un subsol la prima pagină. Folosesc etichetele HTML În demo-ul meu, există o imagine de liliece prezentată în subsolul foametei pentru un efect nu atât de infricosator, dar puteți alege orice altă imagine care vă place. Lorem ipsum dolor stai amet ... Trecerea la CSS, eliminați orice spațiu in jurul Dați câteva dimensiuni ( Aplicați Culoare ambele Seteaza În acest fel va fi suficient spațiu în partea de jos pentru subsol fi vizibil când utilizatorul scroll în jos pagina. Asta e. Subsolul dezvăluie efectul unei pagini web complete. Check out demo-ul Codepen de mai jos. Această tehnică poate fi utilizată pentru un element HTML individual (cu subsol) destul de mult pentru un efect de derulare corect al paginii. Metoda este un pic cam nebun, deoarece în prezent nu funcționează în Chrome și IE, dar are o schimbare decentă. Mai întâi, să creăm un articol lung cu un subsol. Pentru a promova codul semantic, am ales Lorem ipsum dolor stai amet ... Mai jos puteți vedea stilul de bază a articolului și a subsolului. Articolul meu arată în acest moment. Desigur, puteți folosi și alte reguli de stil de bază. Subtitrarea anterioară a fost fixată, aceasta se întâmplă să fie lipicios. Aplicați Puteți ajusta valoarea la gustul dvs., deoarece determină punctul în care subsolul începe să apară sau să dispară în timp ce utilizatorul se deplasează în jos sau în sus. Dă-i aceeași valoare pentru marginea inferioară a articolului, astfel încât să existe suficient spațiu în partea de jos pentru a descoperi subsolul complet. Acum avem nevoie o deschidere de lângă partea de jos a articolului prin care vedem piciorul lipicios derulând în jos și în sus. Pentru a realiza acest lucru, înlocuiți În cele din urmă, hai să mergem plasați subsolul în spatele articolului folosind Și asta este, elementul de pagină individual cu efectul de revelare on-scroll se face. Consultați pixul de mai jos. De asemenea, puteți găsi ambele cazuri de utilizare pe pagina noastră Github. și pentru semantică. in orice caz,
Continuați să derulați până vedeți subsolul
etichetă de către setarea marjelor la 0, și o face suficient de lungă adăugând o înălțime personalizată pentru a induce deplasarea (dacă conținutul corpului din pagină este suficient de lung pentru a provoca deplasarea, nu trebuie să-i dați o înălțime).lăţime și înălţime) la subsolul și fixa poziția sa în partea de jos a ecranului cu pozitie: fixa; și fund: 0; proprietăţi. corp font-family: Crimson Text; font-size: 13pt; marja: 0; footer lățime: 100%; înălțime: 200px; pozitie: fixa; fund: 0; fundal-culoare: # DD5632;
2. Ascundeți subsolul
z-index: -1 conduce la subsol pentru a puneți-l în spatele tuturor celorlalte elemente pe pagină. și tag-uri alb pentru a acoperă subsolul. corp, html background-color: #fff; footer lățime: 100%; înălțime: 200px; pozitie: fixa; fund: 0; fundal-culoare: # DD5632; z-index: -1;
3. Reglați marginea inferioară
margin-bottom din etichetă egală cu înălțimea subsolului (în exemplul meu 200px). corp înălțime: 1000px; marja: 0; margin-bottom: 200px;
Elemente individuale ale paginii
1. Creați un articol lung
și .
articolul 1
articol width: 500px; background-color: # FEF9F3; padding: 20px 40px; articol> subsol înălțime: 100px; fundal-culoare: # FE0178; corp font-family: cormorant garamond;
2. Faceți subsolul Sticky
Poziția: lipicios se pronunță la subsol, așa că se va mișca în interiorul limitelor articolului, dar în continuare să își mențină poziția pe ecran în timp ce utilizatorul se deplasează în sus și în jos. articol> subsol înălțime: 100px; fundal-culoare: # FE0178; pozitie: -webkit-lipicios; pozitie: lipicios; fund: 80px;
bottom: 80px regula fixează poziția subsolului 80px deasupra părții de jos a articolului. articol width: 500px; background-color: # FEF9F3; padding: 20px 40px; margin-bottom: 80px;
3. Adăugați un fundal parțial transparent
culoare de fundal al articolului cu gradient linear imagine de fundal, care de la partea de sus a articolului până la partea de sus a subsolului este colorate cu culoarea de fundal a articolului, iar porțiunea rămasă în partea de jos este făcute transparente. articol width: 500px; padding: 20px 40px; fundal-imagine: gradient liniar (spre fund, # FEF9F3 calc (100% - 120px), transparent 0); margin-bottom: 80px;
calc (100% -120px) Funcția CSS calculează înălțimea completă a articolului minus subsolul. În exemplul meu, este de 120px (100px pentru înălțime + 20px pentru umplere).
4. Plasați subsolul înapoi
z-index: -1 Regula CSS. articol> subsol înălțime: 100px; fundal-culoare: # FE0178; pozitie: -webkit-lipicios; pozitie: lipicios; fund: 80px; z-index: -1;
