CSS-alapú ragadós lábléc létrehozása

Általában JavaScript-nek kell lennie végezzen görgetési hatást a weblapok különböző felhasználói akcióival kapcsolatos. A parancsfájl az a felfelé vagy lefelé görgetés nyomon követése egy oldal, és műveletet indít ha elérik a küszöbmagasságot.

Nem különösebben rossz dolog a JavaScript használata görgetési hatásokhoz. Valójában még bonyolultabb esetek is vannak lehetetlen megoldani JavaScript nélkül. Vannak azonban CSS csapkod amelyek helyettesíthetik ezeket a parancsfájlokat.

Ez a hozzászólás megmutatja nekedw lábléc létrehozása a CSS használatával megjelenő hatások megjelenítéséhez. Két felhasználási esetet fogunk használni ennek bizonyításához: egyet a teljes oldalra (lásd a demót) és egyet az egyes oldalelemekre, például a cikkekre.

Teljes oldal

Létre kell hoznunk egy láblécet az oldal alján jelenik meg miközben a felhasználó lefelé görget. Továbbá, ha lapozzák az oldalt, a láblécnek szüksége van legyen rejtve ismét az oldal alatt.

E cél eléréséhez először létre kell hoznunk egy lábléc rögzített pozícióval a képernyő alján.

1. Hozzon létre egy fix láblécet

Nézzük adjunk hozzá néhány tartalmat és egy láblécet az oldalra. A HTML-címkéket használom

és

szemantikához. azonban,

működik is.

Demómban van egy denevér kép, amely a lábléc belsejében jelenik meg egy nem túl kísérteties hatásért, de kiválaszthat más tetszőleges képet.

  Folytassa a görgetést, amíg meg nem jelenik a lábléc
 Lorem ipsum dolor sit amet…

Mozgás a CSS-re, távolítson el minden helyet körül címke által margók beállítása 0-ra, és hogy elég hosszú legyen egyéni magasság hozzáadása a görgetés indításához (ha az oldalad tartalma elég hosszú ahhoz, hogy görgetést okozjon, akkor nem kell magasságot adnod).

Adjon meg néhány dimenziót (szélesség és magasság) a lábléchez, és rögzítse pozícióját a képernyő aljára a pozíció: fix; és alsó: 0; tulajdonságok.

 test font-family: Crimson szöveg; betűméret: 13pt; margin: 0;  lábléc szélesség: 100%; magasság: 200px; pozíció: fix; alsó: 0; háttérszín: # DD5632;

2. A lábléc elrejtése

Alkalmazza a z-index: -1 szabályozza a láblécet helyezze el minden más elem mögé az oldalon.

Mindkettő színe és címkék fehérek fedje le a láblécet.

 test, html háttérszín: #fff;  lábléc szélesség: 100%; magasság: 200px; pozíció: fix; alsó: 0; háttérszín: # DD5632; z-index: -1;

3. Állítsa be az alsó margót

Állítsa be a margin-bottom a címke a lábléc magasságával egyenlő (200px példámban).

Így a lábléc alján elegendő hely lesz legyen látható amikor a felhasználó lefelé görgeti az oldalt.

 test magasság: 1000px; margin: 0; margin-bottom: 200px;

Ez az. A lábléc teljes weblapra gyakorolt hatását mutatja. Nézze meg az alábbi Codepen demót.

Lásd a Pen Page Footer Reveal (Pure CSS) elemet a HONGKIAT (@hkdc) címen a CodePen-en.

Egyéni oldalelemek

Ez a technika használható egy egyedi HTML elemhez (lábléccel) elég hosszú megfelelő oldal görgetési hatás. A módszer egy kicsit hacky, mivel jelenleg nem működik a Chrome-ban és az IE-ben, de tisztességes hátránya van.

1. Hozzon létre egy hosszú cikket

Először hozzunk létre egy hosszú cikket láblécrel. A szemantikus kód előmozdítása érdekében választottam

és

  1. cikk
 Lorem ipsum dolor sit amet…

Az alábbiakban a alapvető stílus a cikk és a lábléc.

 cikk szélesség: 500px; background-color: # FEF9F3; párnázás: 20px 40px;  cikk> lábléc magasság: 100px; háttérszín: # FE0178;  test font-family: kormorán garamond;

A cikkem jelenleg így néz ki. Természetesen más alapvető stílusú szabályokat is használhat.

Cikk a Footer - Basic Styling-tel

2. Készítse el a lábléc ragasztót

Az előző láblécet rögzítették, ez lesz ragadós legyen. Alkalmazza a összesen: ragadós szabály a láblécre, így a cikk határain belül mozog, de mégis megtartja pozícióját a képernyőn, miközben a felhasználó felfelé és lefelé görget.

 cikk> lábléc magasság: 100px; háttérszín: # FE0178; pozíció: -webkit-sticky; helyzet: ragadós; alul: 80px;

A alsó: 80px A szabály rögzíti a lábléc pozícióját 80px a cikk aljánál.

Értékét az ízlésének megfelelően állíthatja be, mivel meghatározza azt a pontot, ahol a lábléc elkezd megjelenni vagy eltűnik, amikor a felhasználó lefelé vagy felfelé görget..

Adja meg a ugyanaz az érték a cikk alsó margójára, úgy, hogy elegendő hely marad az alján, hogy felfedje a teljes láblécet.

 cikk szélesség: 500px; background-color: # FEF9F3; párnázás: 20px 40px; margin-bottom: 80px;

3. Részlegesen átlátszó háttér hozzáadása

Most szükségünk van egy nyílás a cikk aljánál amelyen keresztül láthatjuk a ragadós láblécet lefelé és felfelé.

Ennek eléréséhez cserélje ki a háttérszín a cikk a lineáris gradiens háttérkép, amely a cikk tetejétől a lábléc tetejéig van színes háttérrel és a fennmaradó rész az alsó része átláthatóvá vált.

 cikk szélesség: 500px; párnázás: 20px 40px; háttérkép: lineáris gradiens (alul, # FEF9F3 számított (100% - 120px), átlátszó 0); margin-bottom: 80px;

Aszámított (100% -120px) A CSS függvény kiszámítja a a cikk teljes magassága mínusz a lábléc. Példámban ez 120x-os (100px a magasságnál) + 20px párnázáshoz).

Cikk lineáris gradiens háttérképpel és ragadós lábléccel

4. Helyezze vissza a láblécet

Végül, nézzük helyezze a láblécet a cikk mögé használni a z-index: -1 CSS szabály.

 cikk> lábléc magasság: 100px; háttérszín: # FE0178; pozíció: -webkit-sticky; helyzet: ragadós; alul: 80px; z-index: -1;

És ez megtörténik, hogy az egyes oldalelemek az on-scroll feltáró hatással vannak. Nézze meg az alábbi Codepen tollat. Mindkét felhasználási eset megtalálható a Github oldalunkon.

Lásd a Pen Footer Reveal in Elements (Pure CSS) elemet a HONGKIAT (@hkdc) oldalon a CodePen-en.