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 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. Lorem ipsum dolor sit amet… Mozgás a CSS-re, távolítson el minden helyet körül Adjon meg néhány dimenziót ( Alkalmazza a Mindkettő színe Állítsa be a Így a lábléc alján elegendő hely lesz legyen látható amikor a felhasználó lefelé görgeti az oldalt. Ez az. A lábléc teljes weblapra gyakorolt hatását mutatja. Nézze meg az alábbi Codepen demót. 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. Először hozzunk létre egy hosszú cikket láblécrel. A szemantikus kód előmozdítása érdekében választottam Lorem ipsum dolor sit amet… Az alábbiakban a alapvető stílus a cikk és a lábléc. A cikkem jelenleg így néz ki. Természetesen más alapvető stílusú szabályokat is használhat. Az előző láblécet rögzítették, ez lesz ragadós legyen. Alkalmazza a A É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. 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 A Végül, nézzük helyezze a láblécet a cikk mögé használni a É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. és szemantikához. azonban,
Folytassa a görgetést, amíg meg nem jelenik a lábléc
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).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
z-index: -1 szabályozza a láblécet helyezze el minden más elem mögé az oldalon. é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
margin-bottom a címke a lábléc magasságával egyenlő (200px példámban). test magasság: 1000px; margin: 0; margin-bottom: 200px;
Egyéni oldalelemek
1. Hozzon létre egy hosszú cikket
és .
1. cikk
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;
2. Készítse el a lábléc ragasztót
ö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;
alsó: 80px A szabály rögzíti a lábléc pozícióját 80px a cikk aljánál. 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
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;
szá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).
4. Helyezze vissza a láblécet
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;
