Så här skapar du CSS-Only Sticky Footer
Normalt behöver vi JavaScript utföra rullningseffekter relaterade till olika användaråtgärder på webbsidor. Skriptet gör jobbet av spårar hur långt upp eller ner rullning tar en sida, och utlöser en åtgärd när en tröskelhöjd nås.
Det är inte särskilt dåligt att använda JavaScript för rullningseffekter. Faktum är att det finns mer komplicerade fall som är omöjligt att lösa utan JavaScript. Men det finns det CSS hacks som kan ersätta dessa skript ibland.
Detta inlägg kommer att visa dig how för att skapa sidförebyggande effekter på sidrullning med hjälp av CSS. Vi använder två användarfall för att visa detta: en för hela sidan (se demo) och en för enskilda sidelement, till exempel artiklar.
Hel sida
Vi måste skapa en footer som visas under sidan medan användaren rullar ner. Även när de rullar sidan tillbaka måste sidfotaren behöva döljas under sidan igen.
För att uppnå detta mål måste vi först skapa en sidfot med fast position längst ned på skärmen.
1. Skapa en fast sidfot
låt oss lägg till lite innehåll och en sidfot till sidan först. Jag använder HTML-taggarna I min demo finns det en fladderbild som visas inuti sidfoten för en inte så spökaktig effekt, men du kan välja vilken annan bild du gillar. Lorem ipsum dolor sit amet ... Flytta till CSS, ta bort eventuellt utrymme runt Ge några dimensioner ( Applicera Färg både Ställ in På så sätt kommer det att finnas tillräckligt med utrymme längst ner för sidfoten till vara synlig när användaren rullar ner sidan. Det är allt. Sidfoten avslöjar effekten för en fullständig webbsida är klar. Kolla in Codepen demo nedan. Denna teknik kan användas för ett enskilt HTML-element (med en sidfot) som är tillräckligt länge för en korrekt sidrulleffekt. Metoden är lite hacky, eftersom den för närvarande inte fungerar i Chrome och IE, men det har en anständig återgång. Låt oss först skapa en lång artikel med en sidfot. För att främja semantisk kod valde jag Lorem ipsum dolor sit amet ... Nedan kan du se grundläggande styling av artikeln och sidfoten. Min artikel ser ut så här här. Naturligtvis kan du också använda andra grundläggande stilregler. Den föregående sidfoten fixades, den här kommer till vara klibbig. Applicera De Du kan justera dess värde till din smak, eftersom det bestämmer den punkt där fotfoten börjar visas eller försvinner medan användaren rullar ner eller ner. Ge samma värde för artikelns bottenmarginal, så att det finns tillräckligt med utrymme längst ner för att avslöja den fulla sidfoten. Nu behöver vi en öppning bredvid artikelns botten genom vilken vi kan se den klibbiga sidfoten som rullar ner och ner. För att uppnå detta, ersätt De Slutligen, låt oss placera sidfoten bakom artikeln använda Och det är det, det enskilda sidelementet med scroll-reveal-effekten är klar. Kolla in kodpenna nedan. Du kan också hitta båda användarfall på vår Github-sida. och för semantik. dock,
Fortsätt rulla tills du ser sidfoten
tagga av ställer in marginaler till 0, och gör det tillräckligt länge lägger till en anpassad höjd att inducera rullning (om kroppsinnehållet på din sida är tillräckligt lång för att orsaka rullning behöver du inte ge den en höjd).bredd och höjd) till sidfoten och fixa sin position till botten av skärmen med position: fast; och botten: 0; egenskaper. kropp font-family: Crimson Text; typsnittstorlek: 13pt; marginal: 0; sidfot bredd: 100%; höjd: 200px; position: fast; botten: 0; bakgrundsfärg: # DD5632;
2. Dölj footer
z-index: -1 styra till sidfoten för att placera den bakom alla andra element på sidan. och taggar vita för att täcka sidfoten. kropp, html bakgrundsfärg: #fff; sidfot bredd: 100%; höjd: 200px; position: fast; botten: 0; bakgrundsfärg: # DD5632; z-index: -1;
3. Justera bottenmarginalen
margin-bottom av märka lika med fotens längd (i mitt exempel 200px). kropp höjd: 1000px; marginal: 0; marginal-botten: 200px;
Individuella sidelement
1. Skapa en lång artikel
och .
Artikel 1
artikel width: 500px; background-color: # FEF9F3; vaddering: 20px 40px; artikel> sidfot höjd: 100px; bakgrundsfärg: # FE0178; kropp font-family: cormorant garamond;
2. Gör Footer Sticky
positioner: klibbig styra till sidfoten, så det kommer att flytta inuti artikelns gränser men ändå behålla sin position på skärmen medan användaren bläddrar upp och ner. artikel> sidfot höjd: 100px; bakgrundsfärg: # FE0178; position: -webkit-klibbig; position: klibbig; botten: 80px;
botten: 80px regel fixar positionen för sidfoten 80px ovanför artikelns botten. artikel width: 500px; background-color: # FEF9F3; vaddering: 20px 40px; marginalbotten: 80px;
3. Lägg till en delvis transparent bakgrund
bakgrundsfärg av artikeln med a linjär gradient bakgrundsbild, vilken från toppen av artikeln till toppen av sidfoten är färgad med bakgrundsfärgen av artikeln och den återstående delen till botten är gjort transparent. artikel width: 500px; vaddering: 20px 40px; bakgrundsbild: linjär gradient (till botten, # FEF9F3 beräknad (100% - 120px), transparent 0); marginalbotten: 80px;
beräkn (100% -120px) CSS-funktionen beräknar full längd av artikeln minus sidfoten. I mitt exempel är det 120px (100px för höjd + 20px för stoppning).
4. Placera fotbaksidan
z-index: -1 CSS-regeln. artikel> sidfot höjd: 100px; bakgrundsfärg: # FE0178; position: -webkit-klibbig; position: klibbig; botten: 80px; z-index: -1;
