Kako stvoriti CSS-samo Sticky Footer
Obično trebamo JavaScript vršite efekte pomicanja se odnose na različite radnje korisnika na web stranicama. Skripta obavlja posao praćenje kretanja stranice prema gore ili dolje, i aktivira radnju kada je dosegnuta visina praga.
Nije osobito loše koristiti JavaScript za pomicanje efekata. Zapravo postoje složeniji slučajevi nemoguće riješiti bez JavaScripta. Međutim postoje CSS hakovi koje ponekad mogu zamijeniti te skripte.
Ovaj post će vam pokazati how stvoriti podnožje otkriti učinke na stranici pomicanje pomoću CSS. Koristit ćemo dva slučaja upotrebe kako bismo to pokazali: jedan za cijelu stranicu (vidi demo) i jedan za pojedinačne elemente stranice, kao što su članci.
Cijela stranica
Moramo stvoriti podnožje pojavljuje se ispod stranice dok se korisnik pomiče prema dolje. Također, kada pomiču stranicu natrag gore podnožje treba biti skriven ponovno ispod stranice.
Da bismo postigli taj cilj, prvo moramo stvoriti podnožje s fiksnim položajem na dnu zaslona.
1. Stvorite fiksni podnožje
Recimo dodajte neki sadržaj i podnožje prvo na stranicu. Koristim HTML oznake U mojoj demonstraciji, u podnožju je prikazana slika šišmiša za ne-tako sablasni efekt, ali možete odabrati bilo koju drugu sliku koja vam se sviđa. Lorem ipsum dolor sit amet ... Prijelaz na CSS, uklonite bilo koji prostor oko Navedite neke dimenzije ( Primijenite Oboje oboje Postavi Na taj način će biti dovoljno mjesta na dnu podnožja biti vidljiv kada korisnik pomakne stranicu prema dolje. To je to. Učinak otkrivanja podnožja za cijelu web-stranicu je gotov. Pogledajte demo Codepen ispod. Ova se tehnika može koristiti za pojedinačni HTML element (s podnožjem) koji je dovoljno dugo za ispravan efekt pomicanja stranice. Metoda je pomalo hakirana, jer trenutno ne radi u Chromeu i IE-u, ali ima pristojnu zamjenu. Najprije stvorimo dugačak članak s podnožjem. Za promicanje semantičkog koda izabrao sam Lorem ipsum dolor sit amet ... Ispod možete vidjeti osnovni stil članka i podnožja. Moj članak trenutno izgleda ovako. Naravno, možete koristiti i druga osnovna pravila. Prethodni podnožje je fiksno, ovo će ići biti ljepljiv. Primijenite Možete prilagoditi njegovu vrijednost svom ukusu, budući da određuje točku u kojoj se podnožje počinje pojavljivati ili nestaje dok se korisnik pomiče prema dolje ili prema gore. Daj ista vrijednost za donju granicu članka, tako da na dnu ima dovoljno prostora za otkrivanje cijelog podnožja. Sada nam treba uvod u dnu članka kroz koje možemo vidjeti ljepljivo podnožje koje se pomiče prema dolje i prema gore. Da biste to postigli, zamijenite Konačno, hajde stavite podnožje iza članka koristiti I to je to, učinio je pojedinačni element stranice s efektom otkrivanja na svitku. Pogledajte šifru Codepen u nastavku. Oba slučaja upotrebe možete pronaći i na našoj Github stranici. i za semantiku. Međutim,
Nastavite se pomicati dok ne vidite podnožje
oznaka prema postavljanje granica na 0, i učinite to dovoljno dugo dodavanjem prilagođene visine potaknuti pomicanje (ako je sadržaj tijela na stranici dovoljno dugačak da uzrokuje pomicanje, ne morate mu dati visinu).širina i visina) na podnožje i popraviti svoj položaj na dnu zaslona s oznakom položaj: fiksno; i dno: 0; nekretnine. tijelo font-family: Crimson Text; veličina fonta: 13pt; margina: 0; podnožje širina: 100%; visina: 200px; položaj: fiksno; dno: 0; boja pozadine: # DD5632;
2. Sakrijte podnožje
z-indeks -1 pravilo u podnožje kako bi stavite ga iza svih ostalih elemenata na stranici. i oznake bijele kako bi pokrijte podnožje. tijelo, html pozadinska boja: #fff; podnožje širina: 100%; visina: 200px; položaj: fiksno; dno: 0; boja pozadine: # DD5632; z-indeks: -1;
3. Podesite donju granicu
margin dna od označiti jednaka visini podnožja (u mom primjeru 200px). tijelo visina: 1000px; margina: 0; margin-bottom: 200px;
Elementi pojedinačnih stranica
1. Stvorite dugačak članak
i .
Članak 1
članak širina: 500px; background-color: # FEF9F3; obloga: 20px 40px; članak> podnožje visina: 100px; boja pozadine: # FE0178; tijelo font-family: kormoran garamond;
2. Napravite podnožje Sticky
Položaj: ljepljivo pravilo za podnožje, tako da će se kretati unutar granica članka, ali ipak zadržati svoj položaj dok se korisnik pomiče gore i dolje. članak> footer height: 100px; boja pozadine: # FE0178; položaj: -webkit-sticky; položaj: ljepljiv; dno: 80px;
Dno: 80px Pravilo ispravlja položaj podnožja 80px iznad dna članka. članak širina: 500px; background-color: # FEF9F3; obloga: 20px 40px; margin-bottom: 80px;
3. Dodajte djelomično prozirnu pozadinu
boja pozadine članka s linearni gradijent pozadinska slika, koji je od vrha članka do vrha podnožja boje s pozadinskom bojom proizvoda, a preostali dio na dnu transparentno. članak širina: 500px; obloga: 20px 40px; background-image: linearno-gradijent (na dnu, # FEF9F3 calc (100% - 120px), transparentan 0); margin-bottom: 80px;
izračunato (100% -120px) CSS funkcija izračunava puna visina članka minus podnožje. U mom primjeru, to je 120px (100px za visinu + 20px za dodavanje).
4. Stavite podnožje natrag
z-indeks: -1 CSS pravilo. članak> footer height: 100px; boja pozadine: # FE0178; položaj: -webkit-sticky; položaj: ljepljiv; dno: 80px; z-indeks: -1;
