Slik lager du CSS-only Sticky Footer
Vanligvis trenger vi JavaScript utfør rulleffekter relatert til ulike brukerhandlinger på nettsider. Skriptet gjør jobben til sporer hvor langt opp eller ned rulling tar en side, og utløser en handling når en terskelhøyde er nådd.
Det er ikke særlig dårlig å bruke JavaScript for å rulle effekter. Faktisk er det mer kompliserte saker som er umulig å løse uten JavaScript. Men det er det CSS hacks som kan erstatte disse skript til tider.
Dette innlegget skal vise deg how for å opprette bunntekster som viser effekter på sideskroll ved hjelp av CSS. Vi skal bruke to brukstilfeller for å demonstrere dette: en for hele siden (se demo) og en for individuelle sideelementer, for eksempel artikler.
Helside
Vi må lage en bunntekst som vises under bunnen av siden mens brukeren ruller ned. Også når de ruller siden tilbake, må bunnteksten ha det bli skjult under siden igjen.
For å oppnå dette målet må vi først opprette en bunntekst med fast stilling nederst på skjermen.
1. Lag en fast bunntekst
la oss legg til noe innhold og en bunntekst til siden først. Jeg bruker HTML-kodene I min demo er det et flaggermusbilde som er vist i bunnteksten for en ikke så spøkende effekt, men du kan velge hvilket som helst annet bilde du liker. Lorem ipsum dolor sit amet ... Flytter til CSS, fjern noe mellomrom rundt Gi noen dimensjoner ( Påfør Farge begge Sett På denne måten vil det være nok plass på bunnen for bunnteksten til være synlig når brukeren ruller nedover siden. Det er det. Foten avslører effekten for en full nettside er ferdig. Ta en titt på Codepen-demoen nedenfor. Denne teknikken kan brukes til et enkelt HTML-element (med en bunntekst) som er lenge nok for en skikkelig siderulleeffekt. Metoden er litt hacky, som det for øyeblikket ikke fungerer i Chrome og IE, men det har en anstendig nedgang. La oss først lage en lang artikkel med en bunntekst. For å fremme semantisk kode valgte jeg Lorem ipsum dolor sit amet ... Nedenfor kan du se grunnleggende styling av artikkelen og bunnteksten. Min artikkel ser for øyeblikket ut slik. Selvfølgelig kan du også bruke andre grunnleggende stilregler. Den forrige bunnteksten ble løst, denne kommer til være klebrig. Påfør De Du kan justere verdien til din smak, siden den bestemmer punktet der fotfeltet begynner å vises eller forsvinne mens brukeren ruller ned eller opp. Gi samme verdi for bunnlinjen til artikkelen, slik at det blir nok plass på bunnen for å avsløre den fulle bunnteksten. Nå trenger vi en åpning neste bunnen av artikkelen gjennom hvilken vi kan se den klissete bunnteksten som ruller ned og ned. For å oppnå dette, erstatt De Til slutt, la oss plasser bunnteksten bak artikkelen bruker Og det er det, det enkelte sideelementet med på-scroll-avslørende effekten er gjort. Sjekk ut kodepennen nedenfor. Du kan også finne begge brukstilfeller på vår Github-side. og for semantikk. derimot,
Fortsett å bla til du ser bunnteksten
merk av angir marginer til 0, og gjør det lenge nok av legger til en egendefinert høyde å indusere rulling (hvis kroppsinnholdet på siden din er lang nok til å forårsake rulling, trenger du ikke å gi den en høyde).bredde og høyde) til bunnteksten, og fikse sin posisjon til bunnen av skjermen med posisjon: fast; og bunn: 0; eiendommer. kropp font-family: Crimson Text; skriftstørrelse: 13pt; margin: 0; bunntekst bredde: 100%; høyde: 200px; posisjon: fast; bunn: 0; bakgrunnsfarge: # DD5632;
2. Skjul fotfoten
z-indeks: -1 regelen til bunnteksten for å kunne plasser den bak alle andre elementer på siden. og merker hvitt for å dekke bunnteksten. kropp, html bakgrunnsfarge: #fff; bunntekst bredde: 100%; høyde: 200px; posisjon: fast; bunn: 0; bakgrunnsfarge: # DD5632; z-indeks: -1;
3. Juster bunnmarginen
margin-bottom av stikkord lik fotenes høyde (i mitt eksempel 200px). kropp høyde: 1000px; margin: 0; margin-bunn: 200px;
Individuelle sideelementer
1. Lag en lang artikkel
og .
Artikkel 1
artikkel bredde: 500px; background-color: # FEF9F3; polstring: 20px 40px; artikkel> bunntekst høyde: 100px; bakgrunnsfarge: # FE0178; kropp font-family: aormorant garamond;
2. Gjør foten klistret
stilling: sticky regelen til bunnteksten, så den vil bevege seg innenfor grensen til artikkelen, men fortsatt opprettholde sin posisjon på skjermen mens brukeren ruller opp og ned. artikkel> bunntekst høyde: 100px; bakgrunnsfarge: # FE0178; posisjon: -webkit-klebrig; stilling: klebrig bunn: 80px;
bottom: 80px regelen retter posisjonen til bunnteksten 80px over bunnen av artikkelen. artikkel bredde: 500px; background-color: # FEF9F3; polstring: 20px 40px; margin-bunn: 80px;
3. Legg til en delvis gjennomsiktig bakgrunn
bakgrunnsfarge av artikkelen med a lineær gradient bakgrunnsbilde, som fra toppen av artikkelen til toppen av bunnteksten er farget med bakgrunnsfargen av artikkelen, og den gjenværende delen til bunnen er gjort gjennomsiktig. artikkel bredde: 500px; polstring: 20px 40px; bakgrunnsbilde: lineær gradient (til bunn, # FEF9F3 kalk (100% - 120px), gjennomsiktig 0); margin-bunn: 80px;
beregnet (100% -120px) CSS-funksjonen beregner full høyde av artikkelen minus bunnteksten. I mitt eksempel er det 120px (100px for høyde + 20px for polstring).
4. Sett fotfot tilbake
z-indeks: -1 CSS regel. artikkel> bunntekst høyde: 100px; bakgrunnsfarge: # FE0178; posisjon: -webkit-klebrig; stilling: klebrig bunn: 80px; z-indeks: -1;
