Sådan opretter du CSS-only Sticky Footer
Normalt har vi brug for JavaScript til udføre scrolling effekter relateret til forskellige brugerhandlinger på websider. Skriften gør jobbet af sporer hvor langt op eller ned scrolling tager en side, og udløser en handling når en tærskelhøjde er nået.
Det er ikke særlig dårligt at bruge JavaScript til at rulle effekter. Faktisk er der mere komplicerede tilfælde, der er umuligt at løse uden JavaScript. Men der er CSS hacks som kan erstatte disse scripts til tider.
Dette indlæg vil vise dig how for at oprette footer afsløre effekter på side scroll med CSS. Vi bruger to brugssager til at demonstrere dette: en for hele siden (se demo) og en for individuelle sideelementer, såsom artikler.
Fuld side
Vi skal oprette en footer det vises under nedenstående side mens brugeren ruller ned. Også, når de ruller siden tilbage, skal fodbolden bruge være skjult under siden igen.
For at nå dette mål skal vi først oprette en footer med fast position nederst på skærmen.
1. Opret en fast footer
Lad os Tilføj noget indhold og en footer til siden først. Jeg bruger HTML-tags I min demo er der et flagermusbillede, der vises inden i footeren for en ikke så spøgelsesagtig effekt, men du kan vælge et andet billede du kan lide. Der er ikke noget at ... Flytter til CSS, fjern eventuelt mellemrum rundt om Giv nogle dimensioner ( Anvend Farve begge Indstil På denne måde vil der være nok plads i bunden til fodfoden til være synlige når brugeren ruller ned på siden. Det er det. Fodbold afslørende effekt for en komplet webside er færdig. Tjek Codepen demo nedenfor. Denne teknik kan bruges til et enkelt HTML element (med en footer), der er langt nok for en ordentlig siderulleffekt. Metoden er lidt hektisk, da den for øjeblikket ikke virker i Chrome og IE, men det har en anstændig tilbagegang. Lad os først lave en lang artikel med en footer. For at fremme semantisk kode valgte jeg Der er ikke noget at ... Nedenfor kan du se grundlæggende styling af artiklen og footeren. Min artikel ser i øjeblikket sådan ud. Selvfølgelig kan du også bruge andre grundlæggende stilregler. Den forrige sidefod blev rettet, den ene kommer til være klæbrig. Anvend Det Du kan justere værdien til din smag, da den bestemmer det punkt, hvor fodfoden begynder at blive vist eller forsvinde, mens brugeren ruller ned eller op. Giv samme værdi for artiklens bundmargin, så der er nok plads i bunden for at afsløre den fulde bundtfod. Nu har vi brug for en åbning næste bunden af artiklen hvorigennem vi kan se den klæbende footer rullende ned og op. For at opnå dette skal du erstatte Det Endelig lad os læg foden efter artiklen bruger Og det er det, det individuelle sideelement med on-scroll reveal-effekten er færdig. Tjek Kodepen pen nedenfor. Du kan også finde begge brugssager på vores Github-side. og til semantik. Imidlertid,
Fortsæt med at rulle, indtil du ser sidefoden
tag ved indstilling af margener til 0, og gør det længe nok af tilføjer en brugerdefineret højde at fremkalde rulning (hvis kropsindholdet på din side er langt nok til at forårsage scrolling, behøver du ikke give det en højde).bredde og højde) til sidefoden og rette sin position til bunden af skærmen med stilling: fast; og bunden: 0; ejendomme. krop font-family: Crimson Text; skrifttypestørrelse: 13pt; margen: 0; footer bredde: 100%; højde: 200px; stilling: fast; bunden: 0; baggrundsfarve: # DD5632;
2. Skjul foden
z-index: -1 regere til footer for at placere det bag alle andre elementer på siden. og tags hvide for at dække fodfoden. krop, html baggrundsfarve: #fff; footer bredde: 100%; højde: 200px; stilling: fast; bunden: 0; baggrundsfarve: # DD5632; z-indeks: -1;
3. Juster bundmargenen
margin-bottom af tag svarende til fodens højde (i mit eksempel 200px). krop højde: 1000px; margen: 0; margin-bund: 200px;
Individuelle sideelementer
1. Opret en lang artikel
og .
Artikel 1
artikel bredde: 500px; background-color: # FEF9F3; polstring: 20px 40px; artikel> footer højde: 100px; baggrundsfarve: # FE0178; krop font-familie: skarver garamond;
2. Lav fodfæsten klæbrig
position: klæbrig regere til footer, så det vil bevæge sig inden for artiklens grænser, men stadig opretholde sin position på skærmen mens brugeren ruller op og ned. artikel> footer højde: 100px; baggrundsfarve: # FE0178; position: -webkit-klæbrig; stilling: klæbrig; bunden: 80px;
bottom: 80px regel fastsætter positionen af footer 80px over bunden af artiklen. artikel bredde: 500px; background-color: # FEF9F3; polstring: 20px 40px; margin-bund: 80px;
3. Tilføj en delvis gennemsigtig baggrund
baggrundsfarve af artiklen med a lineær gradient baggrundsbillede, som fra toppen af artiklen til toppen af footer er farvet med baggrundsfarven af artiklen, og den resterende del til bunden er gjort gennemsigtig. artikel bredde: 500px; polstring: 20px 40px; baggrundsbilde: lineær gradient (til bund, # FEF9F3 calc (100% - 120px), transparent 0); margin-bund: 80px;
beregnet (100% -120px) CSS-funktionen beregner fuld højde af artiklen minus footer. I mit eksempel er det 120px (100px for højde + 20px til polstring).
4. Placer fodbaggen tilbage
z-indeks: -1 CSS regel. artikel> footer højde: 100px; baggrundsfarve: # FE0178; position: -webkit-klæbrig; stilling: klæbrig; bunden: 80px; z-indeks: -1;
