Kā izveidot tikai CSS-Sticky Footer
Parasti mums ir nepieciešams JavaScript veikt ritināšanas efektus saistītas ar dažādām lietotāju darbībām tīmekļa lapās. Skripts darbojas izsekot, cik tālu uz augšu vai uz leju ritina lapu, un iedarbina darbību sasniedzot sliekšņa augstumu.
Nav īpaši slikti lietot JavaScript, lai ritinātu efektus. Patiesībā ir sarežģītāki gadījumi nav iespējams atrisināt bez JavaScript. Tomēr ir CSS hacks kas var aizstāt šos skriptus reizēm.
Šis amats jums parādīs how, lai izveidotu kājenes, atklāj ietekmi uz lapas ritināšanu, izmantojot CSS. Lai to pierādītu, mēs izmantosim divus lietošanas gadījumus: vienu visu lapu (skatiet demo) un vienu atsevišķiem lapas elementiem, piemēram, rakstus.
Pilna lapa
Mums ir jāizveido kājene parādās zem lapas kamēr lietotājs ritina uz leju. Arī tad, kad tie ritina lapu, ir jānorāda kājene būt paslēpta vēlreiz zem lapas.
Lai sasniegtu šo mērķi, vispirms ir jāizveido a kājene ar fiksētu pozīciju ekrāna apakšdaļā.
1. Izveidojiet fiksēto kājeni
Let's pievienojiet saturu un kājeni vispirms uz lapu. Es izmantoju HTML tagus Manā demonstrācijā ir kājiņas attēls, kas ir redzams kājenes apakšdaļā, lai iegūtu ne tik spožu efektu, bet jūs varat izvēlēties jebkuru citu attēlu, kuru vēlaties. Lorem ipsum dolor sit amet… Pārcelšanās uz CSS, noņemt jebkuru vietu apkārt Dodiet dažus izmērus ( Lietot Krāsas gan Iestatiet Tādā veidā apakšējā daļā būs pietiekami daudz vietas kājenei jābūt redzamam kad lietotājs ritina lapu uz leju. Tieši tā. Ir veikta kājenes, kas atklāj pilnu tīmekļa lapu. Skatiet tālāk esošo Codepen demo. Šo metodi var izmantot atsevišķam HTML elementam (ar kājeni) pietiekami garš pareizu lapu ritināšanas efektu. Šī metode ir mazliet hacky, jo tā pašlaik nedarbojas pārlūkā Chrome un IE, bet tai ir pienācīgs rezerves variants. Pirmkārt, izveidosim garu rakstu ar kājeni. Lai veicinātu semantisko kodu, es izvēlējos Lorem ipsum dolor sit amet… Zemāk jūs varat redzēt pamata stils rakstu un kājeni. Mans raksts šobrīd izskatās šādi. Protams, jūs varat izmantot arī citus pamata stila noteikumus. Iepriekšējais kājene tika fiksēta, tas notiek būt lipīga. Lietot The Jūs varat pielāgot savu vērtību jūsu gaumei, jo tā nosaka vietu, kur kājene sāk parādīties vai pazust, kamēr lietotājs ritina uz leju vai uz augšu. Dodiet vienāda vērtība attiecībā uz raksta apakšējo robežu, tā, lai apakšā būtu pietiekami daudz vietas, lai atklātu visu kājeni. Tagad mums vajag atvērums blakus raksta apakšdaļai caur kuru mēs varam redzēt lipīgo kājeni ritinot uz leju un uz augšu. Lai to panāktu, nomainiet The Visbeidzot, pieņemsim novietojiet kājeni aiz raksta izmantojot Un tas ir viss, individuālais lapas elements ar on-scroll atklāj efektu. Pārbaudiet tālāk esošo Codepen pildspalvu. Abus lietošanas gadījumus var atrast arī mūsu Github lapā. un semantikai. Tomēr,
Turiet ritināšanu, līdz redzat kājeni
atzīmē ar iestatot rezerves līdz 0, un dariet to pietiekami ilgi pievienojot pielāgotu augstumu lai izraisītu ritināšanu (ja ķermeņa saturs jūsu lapā ir pietiekami garš, lai izraisītu ritināšanu, jums nav jādod tam augstums).platums un augstums) uz kājeni un noteikt savu pozīciju uz ekrāna apakšdaļu ar pozīcija: fiksēts; un apakšā: 0; īpašības. ķermenis font-family: Crimson Text; fonta lielums: 13pt; starpība: 0; kājene platums: 100%; augstums: 200px; pozīcija: fiksēts; apakšā: 0; fona krāsa: # DD5632;
2. Paslēpt kājeni
z-indekss: -1 rīkoties ar kājeni, lai novietojiet to aiz visiem citiem elementiem lapā. un tagi balti, lai aptver kājeni. ķermenis, html fona krāsa: #fff; kājene platums: 100%; augstums: 200px; pozīcija: fiksēts; apakšā: 0; fona krāsa: # DD5632; z-indekss: -1;
3. Pielāgojiet apakšējo margu
malas-apakšas no tag vienāds ar kājenes augstumu (manā piemērā 200px). ķermenis augstums: 1000px; starpība: 0; margas apakšā: 200px;
Individuālās lapas elementi
1. Izveidojiet garu pantu
un .
1. pants
raksts platums: 500px; fona krāsa: # FEF9F3; polsterējums: 20px 40px; raksts> kājene augstums: 100px; fona krāsa: # FE0178; ķermenis font-family: kormorāns;
2. Izveidojiet kājenes uzlīmes
pozīcija: lipīga likt uz kājeni, lai tā pārvietotos raksta robežās, bet tomēr saglabāt savu pozīciju ekrānā, kamēr lietotājs ritina uz augšu un uz leju. raksts> kājene augstums: 100px; fona krāsa: # FE0178; pozīcija: -webkit-sticky; pozīcija: lipīga; apakšā: 80px;
apakšā: 80px noteikums nosaka kājenes stāvokli 80px virs raksta apakšas. raksts platums: 500px; fona krāsa: # FEF9F3; polsterējums: 20px 40px; margas apakšā: 80px;
3. Pievienojiet daļēji caurspīdīgu fonu
fona krāsa rakstu ar a lineārais gradients fona attēls, kas no raksta augšdaļas līdz kājenes augšdaļai ir krāsaina ar fona krāsu un atlikušo daļu uz apakšas pārredzami. raksts platums: 500px; polsterējums: 20px 40px; fona attēls: lineārais gradients (uz leju, # FEF9F3 aprēķināts (100% - 120px), caurspīdīgs 0); margas apakšā: 80px;
calc (100% -120px) CSS funkcija aprēķina pilns raksta augstums mīnus kājene. Manā piemērā tas ir 120 pikseļi (100px augstumam + 20px par polsterējumu).
4. Novietojiet kājenes atpakaļ
z-indekss: -1 CSS noteikums. raksts> kājene augstums: 100px; fona krāsa: # FE0178; pozīcija: -webkit-sticky; pozīcija: lipīga; apakšā: 80px; z-indekss: -1;
