Ustvarjanje lepljive nožice za CSS
Običajno potrebujemo JavaScript učinke drsenja povezane z različnimi dejanji uporabnikov na spletnih straneh. Skript opravi delo sledenje premikanju strani navzgor ali navzdol, in sproži dejanje ko dosežete višino praga.
Ni še posebej slabo uporabljati JavaScript za drsenje učinkov. Dejansko obstajajo bolj zapleteni primeri nemogoče rešiti brez JavaScripta. Vendar pa obstajajo CSS hack ki lahko včasih zamenjajo te skripte.
Ta objava vam bo pokazala how, da ustvarite nogo razkrije učinke na strani drsenje z uporabo CSS. Za prikaz tega bomo uporabili dva primera uporabe: eno za celotno stran (glej demo) in eno za posamezne elemente strani, na primer članke.
Celotna stran
Ustvariti moramo nogo se izpiše pod stranjo medtem ko se uporabnik pomika navzdol. Tudi, ko se pomikajo po strani nazaj, mora noga biti skrit spet pod stranjo.
Da bi dosegli ta cilj, moramo najprej ustvariti noga s fiksnim položajem na dnu zaslona.
1. Ustvarite fiksno nogo
Gremo dodajte nekaj vsebine in nogo najprej na stran. Uporabljam oznake HTML V moji predstavitvi je v nogi prikazana slika netopirja za ne tako navdušeni učinek, vendar lahko izberete katero koli drugo sliko. Lorem ipsum dolor sit amet ... Premik na CSS, odstranite ves prostor okoli Navedite nekaj dimenzij ( Uporabite Barva obe Nastavite Na ta način bo na dnu dovolj prostora za nogo biti vidni ko se uporabnik pomakne navzdol po strani. To je to. Učinek razkritja noge za celotno spletno stran je opravljen. Spodaj si oglejte demo Codepen. Ta tehnika se lahko uporablja za posamezen element HTML (z nogo), ki je dovolj dolgo za ustrezen učinek drsenja strani. Metoda je rahlo navihana, saj trenutno ne deluje v Chromu in IE, vendar ima dostojno nadomestno rešitev. Najprej ustvarimo dolg članek z nogo. Za promocijo semantične kode sem izbral Lorem ipsum dolor sit amet ... Spodaj lahko vidite osnovno oblikovanje izdelka in noge. Moj članek trenutno izgleda takole. Seveda lahko uporabite tudi druga osnovna pravila. Prejšnja noga je bila popravljena, ta je namenjena biti lepljiv. Uporabite The Vrednost lahko prilagodite svojemu okusu, saj določa točko, kjer se noga začne prikazovati ali izginjati, medtem ko se uporabnik pomika navzdol ali navzgor. Daj enako vrednost za spodnji rob članka, tako da bo na dnu dovolj prostora za razkritje celotne noge. Zdaj potrebujemo uvod v spodnjem delu članka skozi katere lahko vidimo lepljivo nogo, ki se pomika navzgor in navzdol. Da bi to dosegli, zamenjajte The In končno postavite nogo za člankom uporabljati In to je to, posamezni element strani z učinkom odkrivanja na drsniku je opravljen. Oglejte si spodnji Codepen pero. Obe primeri uporabe lahko najdete tudi na naši Github strani. in za semantiko. Vendar pa,
Nadaljujte, dokler ne vidite noge
oznako za nastavitev robov na 0, in dovolj dolgo dodajanje višine po meri spodbudi se pomikanje (če je vsebina telesa na vaši strani dovolj dolga, da povzroči pomikanje, vam ni treba dati višine).premer in višine) na nogo in popravi svoj položaj na dnu zaslona s tipko položaj: fiksno; in spodaj: 0; lastnosti. body družina pisav: Crimson Text; velikost pisave: 13pt; margin: 0; noga širina: 100%; višina: 200px; položaj: fiksno; spodaj: 0; barva ozadja: # DD5632;
2. Skrij nogo
z-indeks: -1 pravilo za nogo, da postavite za vse druge elemente na strani. in oznake bela, da bi pokrijte nogo. telo, html ozadje-barva: #fff; noga širina: 100%; višina: 200px; položaj: fiksno; spodaj: 0; barva ozadja: # DD5632; z-indeks: -1;
3. Prilagodite spodnji rob
margin-bottom od oznaka enaka višini noge (v mojem primeru 200px). telo višina: 1000px; margin: 0; margin-bottom: 200px;
Elementi posamezne strani
1. Ustvarite dolg člen
in .
Člen 1 1. \ T
irina: 500px; barva ozadja: # FEF9F3; oblazinjenje: 20px 40px; članek> noga višina: 100px; barva ozadja: # FE0178; telo družina pisav: kormoran garamond;
2. Naredite nogo Sticky
položaj: lepljiv pravilo za nogo, tako da se bo premaknilo znotraj meja članka, vendar še vedno ohraniti svoj položaj na zaslonu, medtem ko se uporabnik pomika gor in dol. article> footer višina: 100px; barva ozadja: # FE0178; položaj: -webkit-sticky; položaj: lepljiv; spodaj: 80px;
spodaj: 80px Pravilo določi položaj noge 80px nad dnom članka. irina: 500px; barva ozadja: # FEF9F3; oblazinjenje: 20px 40px; margin-bottom: 80px;
3. Dodajte delno prosojno ozadje
Barva ozadja članka z a linearni gradient slika ozadja, ki je od vrha članka do vrha noge barve z barvo ozadja izdelka, preostali del pa na dnu pregleden. irina: 500px; oblazinjenje: 20px 40px; background-image: linearni gradient (do dna, # FEF9F3 calc (100% - 120px), transparentno 0); margin-bottom: 80px;
Calc (100% -120 px) Funkcija CSS izračuna polna višina članka minus nogo. V mojem primeru je 120px (100px za višino + 20px za oblazinjenje).
4. Postavite nogo nazaj
z-indeks: -1 Pravilo CSS. article> footer višina: 100px; barva ozadja: # FE0178; položaj: -webkit-sticky; položaj: lepljiv; spodaj: 80px; z-indeks: -1;
