Kuidas luua CSS-i ainult kleepuv jalus
Tavaliselt on meil vaja JavaScripti teostage kerimisefekte seotud erinevate kasutajate tegevustega veebilehtedel. Skript töötab jälgides, kui kaugele üles või alla kerimine võtab lehekülje, ja käivitab toimingu künniskõrguse saavutamisel.
See ei ole eriti halb kasutada JavaScripti kerimiseks. Tegelikult on keerulisemaid juhtumeid võimatu lahendada ilma JavaScriptita. Siiski on olemas CSS hacks mis võivad need skriptid mõnikord asendada.
See postitus näitab teile how, et luua jalus, mis avaldab CSS-i abil lehekülje kerimise mõju. Selle näitamiseks kasutame kahte kasutusjuhtumit: üks kogu leheküljele (vt demo) ja üks üksikute lehtelementide jaoks, näiteks artiklid.
Täielik lehekülg
Me peame looma selle ilmub lehekülje alt allapoole liikudes. Samuti, kui nad sirvivad lehekülge, peab jalus olema varundatud olema peidetud uuesti lehe all.
Selle eesmärgi saavutamiseks peame kõigepealt looma a jalus koos fikseeritud asendiga ekraani allosas.
1. Loo fikseeritud jalus
Olgem lisage sisu ja jalus esmalt lehele. Ma kasutan HTML-silte Minu demos on jalgade pilt, mida näidatakse jaluses, nii et see ei ole nii õudne efekt, kuid võite valida mõne muu soovitud pildi. Lorem ipsum dolor sit amet… Liikumine CSS-i, eemaldage kõik ruumid ümber Andke mõningaid mõõtmeid ( Rakenda Värvige nii Määra Sel moel on alumise aluse jaoks piisavalt ruumi olema nähtav kui kasutaja kerib lehekülge alla. See ongi see. Alamjälg avaldab täieliku veebilehe mõju. Vaadake allpool Codepeni demot. Seda tehnikat saab kasutada üksikute HTML-elementide jaoks (jalusega) piisavalt kaua õige lehekülje kerimise efekti jaoks. Meetod on natuke häkklik, kuna see ei tööta praegu Chrome'is ja IE-s, kuid tal on korralik varu. Esmalt looge pikk jalusega artikkel. Semantilise koodi edendamiseks valisin Lorem ipsum dolor sit amet… Allpool on näha põhiline stiil artikli ja jaluse kohta. Minu artikkel näeb praegu välja selline. Loomulikult saab kasutada ka teisi põhi-eeskirju. Eelmine jalus oli fikseeritud, see läheb olema kleepuv. Rakenda The Saate oma väärtust oma maitsele kohandada, sest see määrab punkti, kus jalus algab või kaob, kui kasutaja kerib alla või üles. Anna sama väärtust artikli alumise margi jaoks, nii, et allosas oleks piisavalt ruumi, et paljastada kogu jalus. Nüüd on meil vaja artikli põhjale järgmine ava mille kaudu näeme kleepuvat jalust alla ja alla. Selle saavutamiseks asenda The Lõpuks, let's asetage jala selle artikli taga kasutades Ja see ongi nii, et üksikute leheküljeelementidega on-on-scroll paljastatakse efekt. Vaadake allpool Codepeni pliiatsit. Mõlemad kasutusjuhud leiate ka meie Githubi lehelt. ja semantikale. Kuid,
Hoidke kerimist, kuni näete jalust
sildi poolt marginaalide seadmine väärtusele 0, ja tehke see piisavalt pikk kohandatud kõrguse lisamine kerimise esilekutsumiseks (kui keha sisu teie lehel on piisavalt pikk, et põhjustada kerimist, ei pea te sellele kõrgust andma).laius ja kõrgus) jalusesse ja fikseerida oma positsioon ekraani allosas asend: fikseeritud; ja põhja: 0; omadused. keha font-family: Crimson Text; fondi suurus: 13pt; varu: 0; jalus laius: 100%; kõrgus: 200 px; asend: fikseeritud; põhja: 0; taustavärv: # DD5632;
2. Peida jalus
z-indeks: -1 reeglina jalusele asetage see kõigi teiste elementide taha lehel. ja Sildid: valge katke jalus. keha, html taustavärv: #fff; jalus laius: 100%; kõrgus: 200 px; asend: fikseeritud; põhja: 0; taustavärv: # DD5632; z-indeks: -1;
3. Reguleeri alumine marginaal
marginaali põhja selle silt võrdub jaluse kõrgusega (minu 200px näites). keha kõrgus: 1000 px; varu: 0; marginaal-alumine: 200 px;
Individuaalsed leheküljeelemendid
1. Looge pikk artikkel
ja .
Artikkel 1
artikkel laius: 500 px; taustavärv: # FEF9F3; polsterdus: 20px 40px; article> footer height: 100px; taustavärv: # FE0178; keha font-family: kormoran garamond;
2. Tehke jaluslaua kleepuv
asend: kleepuv reegli jalusesse, nii et see liigub artikli piiridesse, kuid siiski säilitama oma positsiooni ekraanil, kui kasutaja kerib üles ja alla. artikkel> jalus kõrgus: 100 px; taustavärv: # FE0178; positsioon: -webkit-sticky; asend: kleepuv; põhi: 80px;
alt: 80tk reegel fikseerib jaluse asukoha 80 pikslit artikli põhjast kõrgemal. artikkel laius: 500 px; taustavärv: # FEF9F3; polsterdus: 20px 40px; margin-bottom: 80px;
3. Lisage osaliselt läbipaistev taust
taustavärv artikli kohta a lineaarne gradient taustapilt, mis on artikli ülaosast jaluse ülaosas värvitud taustavärviga ja ülejäänud osa põhja läbipaistev. artikkel laius: 500 px; polsterdus: 20px 40px; taustapilt: lineaarne gradient (põhja, # FEF9F3 arvutatud (100% - 120 px), läbipaistev 0); margin-bottom: 80px;
arvutatud (100% -120px) CSS funktsioon arvutab artikli täielik kõrgus miinus jalus. Minu näites on see 120 pikslit (kõrgus 100px) + 20px polsterdamiseks).
4. Asetage jalus tagasi
z-indeks: -1 CSS reegel. artikkel> jalus kõrgus: 100 px; taustavärv: # FE0178; positsioon: -webkit-sticky; asend: kleepuv; põhi: 80px; z-indeks: -1;
