Miten luodaan CSS-vain tahmea alatunniste
Normaalisti tarvitsemme JavaScriptin suorita vieritysvaikutuksia liittyvät eri käyttäjän toimiin verkkosivuilla. Käsikirjoitus toimii seurata, kuinka pitkälle ylös- tai alaspäin vieritys vie sivun, ja käynnistää toiminnon kun kynnyskorkeus on saavutettu.
Ei ole erityisen huono asia käyttää JavaScript-toimintoa vieritysvaikutuksiin. Itse asiassa on olemassa monimutkaisempia tapauksia mahdotonta ratkaista ilman JavaScriptiä. On kuitenkin olemassa CSS hacks jotka voivat korvata näitä komentosarjoja ajoittain.
Tämä viesti näyttää sinulle how luoda alatunniste paljastaa sivun vierityksen vaikutuksia CSS: n avulla. Käytämme kahta käyttötapausta tämän osoittamiseksi: yksi koko sivulle (katso demo) ja yksi yksittäisille sivuelementeille, kuten artikkeleille.
Täysi sivu
Meidän on luotava alatunniste näkyy sivun alapuolella kun käyttäjä liikkuu alaspäin. Myös silloin, kun ne vierittävät sivua varmuuskopioimalla alatunnisteen piilotettu sivun alla.
Tämän tavoitteen saavuttamiseksi meidän on ensin luotava a alatunniste, jossa on kiinteä sijainti näytön alareunassa.
1. Luo kiinteä alatunniste
Katsotaanpa lisää sisältöä ja alatunnistetta ensin sivulle. Käytän HTML-tunnisteita Demoissani on jalkapohjan kuva, joka näkyy alatunnisteessa ei-niin pelottavan vaikutuksen vuoksi, mutta voit valita minkä tahansa muun kuvan, jota haluat. Lorem ipsum dolor sit amet… Siirtyminen CSS: ään, poista kaikki tila ympäri Anna joitakin ulottuvuuksia ( Käytä Väri sekä Aseta Tällä tavalla alareunassa on riittävästi tilaa alatunnisteelle olla näkyvissä kun käyttäjä vierittää sivua alaspäin. Se siitä. Alatunniste paljastaa täydellisen verkkosivun vaikutuksen. Tutustu alla olevaan Codepen-demoon. Tätä tekniikkaa voidaan käyttää yksittäiseen HTML-elementtiin (jossa on alatunniste) tarpeeksi pitkään oikean sivun vieritysvaikutuksen. Menetelmä on hieman hacky, koska se ei tällä hetkellä toimi Chromessa ja IE: ssä, mutta sillä on kunnollinen varmuuskopio. Ensiksi luodaan pitkä artikkeli, jossa on alatunniste. Semanttisen koodin edistämiseksi valitsin Lorem ipsum dolor sit amet… Alla näet perusmuotoilu artikkelin ja alatunnisteen. Artikkelini näyttää tällä hetkellä tältä. Voit tietysti käyttää myös muita perussääntöjä. Edellinen alatunniste oli kiinteä, tämä on menossa olla tahmea. Käytä Voit säätää sen arvoa makusi mukaan, koska se määrittää, missä alatunniste alkaa näkyä tai katoaa, kun käyttäjä selaa alas tai ylös. Anna sama arvo artikkelin alarajalle, niin että alareunassa on riittävästi tilaa paljastamaan koko alatunnisteen. Nyt tarvitsemme aukko artikkelin pohjan vieressä jonka kautta voimme nähdä tahmea alatunnisteen vierittämisen alas ja ylöspäin. Tämän saavuttamiseksi vaihda Lopuksi, let's aseta alatunniste artikkelin taakse käyttämällä Ja se on, yksittäinen sivuelementti, jossa on-scroll-paljastava vaikutus on tehty. Tutustu Codepen-kynään alla. Molemmat käyttötapaukset löytyvät myös Github-sivuiltamme. ja semantille. kuitenkin,
Jatka vierittämistä, kunnes näet alatunnisteen
tunniste marginaalien asettaminen arvoon 0, ja tehdä siitä tarpeeksi pitkä mukautetun korkeuden lisääminen vierittämisen aikaansaamiseksi (jos sivusi kehon sisältö on tarpeeksi pitkä, jotta se voi vierittää, sinun ei tarvitse antaa sille korkeutta).leveys ja korkeus) alatunnisteeseen ja vahvistaa asemansa näytön alareunaan sijainti: kiinteä; ja pohja: 0; ominaisuudet. body font-family: Crimson-teksti; kirjasinkoko: 13pt; marginaali: 0; alatunniste leveys: 100%; korkeus: 200px; sijainti: kiinteä; pohja: 0; taustaväri: # DD5632;
2. Piilota alatunniste
z-indeksi: -1 hallita alatunnistetta sijoita se kaikkien muiden elementtien taakse sivulla. ja tunnisteet valkoiseksi, jotta peitä alatunniste. elin, html taustaväri: #fff; alatunniste leveys: 100%; korkeus: 200px; sijainti: kiinteä; pohja: 0; taustaväri: # DD5632; z-indeksi: -1;
3. Säädä alaraja
margin-bottom n tag sama kuin alatunnisteen korkeus (esimerkissäni 200px). elin korkeus: 1000px; marginaali: 0; marginaalin pohja: 200px;
Yksittäiset sivuelementit
1. Luo pitkä artikkeli
ja .
1 artikla
artikkeli leveys: 500px; background-color: # FEF9F3; pehmuste: 20px 40px; artikkeli> alatunniste korkeus: 100px; taustaväri: # FE0178; kehon font-family: merimetson asukas;
2. Tee alatunniste Sticky
asento: tahmea sääntö alatunnisteeseen, joten se liikkuu artikkelin rajojen sisällä, mutta silti säilyttää asemansa näytössä, kun käyttäjä selaa ylös ja alas. artikkeli> alatunniste korkeus: 100px; taustaväri: # FE0178; sijainti: -webkit-sticky; asema: tahmea; pohja: 80px;
pohja: 80px sääntö vahvistaa alatunnisteen sijainnin 80px artikkelin pohjan yläpuolella. artikkeli leveys: 500px; background-color: # FEF9F3; pehmuste: 20px 40px; marginaali: 80px;
3. Lisää osittain läpinäkyvä tausta
taustaväri artikkelin kanssa a lineaarinen gradientti taustakuva, joka on artikkelin yläosasta alatunnisteen yläosaan värillinen taustavärillä ja jäljellä oleva osa pohjaan on tehty avoimeksi. artikkeli leveys: 500px; pehmuste: 20px 40px; taustakuva: lineaarinen gradientti (pohjaan, # FEF9F3 laskettu (100% - 120px), läpinäkyvä 0); marginaali: 80px;
laskettu (100% -120px) CSS-toiminto laskee artikkelin koko korkeus miinus alatunniste. Esimerkkinäni se on 120 pikseliä (korkeus 100px) + 20px pehmustusta varten.
4. Aseta alatunniste takaisin
z-indeksi: -1 CSS-sääntö. artikkeli> alatunniste korkeus: 100px; taustaväri: # FE0178; sijainti: -webkit-sticky; asema: tahmea; pohja: 80px; z-indeksi: -1;
