Kaip sukurti tik CSS-Sticky Footer
Paprastai mums reikia JavaScript atlikti slinkimo efektus susiję su skirtingais naudotojų veiksmais tinklalapiuose. Scenarijus atlieka užduotį stebėti, kaip slenkamas aukštyn arba žemyn, puslapis, ir sukelia veiksmą kai pasiekiamas slenksčio aukštis.
Ne itin blogai naudoti „JavaScript“ slinkimo efektams. Iš tiesų yra sudėtingesnių atvejų neįmanoma išspręsti be „JavaScript“. Tačiau yra CSS hacks kurie kartais gali pakeisti šiuos scenarijus.
Šis pranešimas jums parodys jumsw sukurti poraštę, atskleidžiančią puslapio slinkties poveikį naudojant CSS. Norėdami tai įrodyti, naudosime du naudojimo atvejus: vieną visą puslapį (žr. Demonstraciją) ir vieną atskiriems puslapio elementams, pvz., Straipsnius.
Visas puslapis
Mums reikia sukurti poraštę pasirodo iš puslapio naršant žemyn. Be to, kai jie slinkia puslapį, atsarginę kopiją reikia padaryti būti paslėpti dar kartą po puslapiu.
Norėdami pasiekti šį tikslą, pirmiausia turime sukurti a poraštė su fiksuota padėtimi ekrano apačioje.
1. Sukurkite fiksuotą poraštę
Leiskite pridėkite turinį ir poraštę pirmiausia į puslapį. Naudoju HTML žymes Savo demonstracijoje rodomas šikšnosparnio atvaizdas, esantis poraštės viduje, kad ne toks baisus efektas, bet galite pasirinkti bet kurį kitą norimą vaizdą. Lorem ipsum dolor sit amet… Perėjimas prie CSS, pašalinti bet kokią erdvę apie Pateikite keletą matmenų ( Taikykite Spalva tiek Nustatyti Tokiu būdu apačios apačioje bus pakankamai vietos būti matomi kai vartotojas slenka žemyn. Viskas. Padaryta poraštė, atskleidžianti viso tinklalapio poveikį. Peržiūrėkite toliau pateiktą „Codepen“ demonstraciją. Šis metodas gali būti naudojamas atskiram HTML elementui (su poraštė) pakankamai ilgai tinkamo puslapio slinkimo efekto. Šis metodas yra šiek tiek trenktas, nes šiuo metu jis neveikia „Chrome“ ir „IE“, tačiau jis turi tinkamas atsargas. Pirma, sukursime ilgą straipsnį su poraštėmis. Norėdami skatinti semantinį kodą, pasirinkau Lorem ipsum dolor sit amet… Žemiau galite pamatyti pagrindinis stilius straipsnio ir poraštės. Mano straipsnis šiuo metu atrodo taip. Žinoma, galite naudoti ir kitas pagrindines stiliaus taisykles. Ankstesnė poraštė buvo fiksuota būti lipni. Taikykite The Savo vertę galite reguliuoti pagal savo skonį, nes jis nustato tašką, kuriame poraštė pradeda atsirasti arba išnykti, kai vartotojas slenka žemyn arba aukštyn. Duokite ta pati vertė apatinei parašo daliai, taip, kad apačioje būtų pakankamai vietos, kad atskleistumėte visą poraštę. Dabar mums reikia atidarymas šalia straipsnio apačios per kurį matome lipną apačią, kuri slenka žemyn ir aukštyn. Norėdami tai pasiekti, pakeiskite The Galiausiai, leiskite padėkite poraštę už straipsnį naudojant Ir tai, individualus puslapio elementas su atskleidimo efektu daromas. Žiūrėkite žemiau esančią „Codepen“ švirkštimo priemonę. Abu naudojimo atvejus taip pat galite rasti mūsų „Github“ puslapyje. ir semantikai. Tačiau,
Toliau slinkite, kol pamatysite poraštę
žymelė nustatyti paraštes iki 0, ir padaryti jį pakankamai ilgai pridedant pasirinktinį aukštį norėdami paskatinti (jei jūsų puslapio kūno turinys yra pakankamai ilgas, kad sukeltų slinkimą, jums nereikia suteikti jam aukščio).plotis ir aukštis) į poraštę ir nustatyti savo poziciją ekrano apačioje su padėtis: fiksuota; ir apačioje: 0; savybės. kūnas font-family: Crimson Text; šrifto dydis: 13pt; marža: 0; poraštė plotis: 100%; aukštis: 200px; padėtis: fiksuota; apačioje: 0; fono spalva: # DD5632;
2. Slėpti poraštę
z-indeksas: -1 valdyti į poraštę padėkite jį už visų kitų elementų puslapyje. ir žymės, kad būtų padengti poraštę. kūnas, html fono spalva: #fff; poraštė plotis: 100%; aukštis: 200px; padėtis: fiksuota; apačioje: 0; fono spalva: # DD5632; z-indeksas: -1;
3. Sureguliuokite apatinę paraštę
paraštės apačia iš žyma lygus poraštės aukščiui (mano 200px pavyzdyje). kūnas aukštis: 1000px; marža: 0; paraštės apačia: 200px;
Individualūs puslapių elementai
1. Sukurkite ilgą straipsnį
ir .
1 straipsnis
Straipsnis plotis: 500px; fono spalva: # FEF9F3; paminkštinimas: 20px 40px; straipsnis> poraštė aukštis: 100px; fono spalva: # FE0178; kūnas font-family: kormoranų garamondas;
2. Padarykite poraštę
padėtis: lipnus taisyklė prie poraštės, todėl ji judės straipsnio ribose, bet vis tiek išlaikyti savo poziciją ekrane, kai vartotojas slenka aukštyn ir žemyn. straipsnis> poraštė aukštis: 100px; fono spalva: # FE0178; pozicija: -webkit-sticky; padėtis: lipnus; apačioje: 80px;
apačioje: 80px taisyklė nustato poraštės padėtį 80px virš straipsnio dugno. Straipsnis plotis: 500px; fono spalva: # FEF9F3; paminkštinimas: 20px 40px; paraštės apačia: 80px;
3. Pridėti dalinai skaidrų foną
fono spalva straipsnio su a tiesinis gradientas fono vaizdas, kuris nuo straipsnio viršaus iki poraštės viršaus yra spalvos su fono spalva ir likusi dalis apačioje yra skaidrus. Straipsnis plotis: 500px; paminkštinimas: 20px 40px; fono vaizdas: tiesinis gradientas (į apačią, # FEF9F3 apskaičiuotas (100% - 120px), skaidrus 0); paraštės apačia: 80px;
Calc (100% -120px) CSS funkcija apskaičiuoja pilnas straipsnio aukštis, atėmus poraštę. Mano pavyzdyje, tai 120px (100 pikselių aukščio + 20vnt..
4. Įdėkite poraštę atgal
z-indeksas: -1 CSS taisyklė. straipsnis> poraštė aukštis: 100px; fono spalva: # FE0178; pozicija: -webkit-sticky; padėtis: lipnus; apačioje: 80px; z-indeksas: -1;
