Ako vytvoriť len Sticky Footer v systéme CSS
Normálne potrebujeme JavaScript vykonajte rolovanie efekty súvisiace s rôznymi akciami používateľov na webových stránkach. Skript robí prácu sledovanie toho, ako ďaleko hore alebo dolu posúva stránku, a spustí akciu keď sa dosiahne prahová výška.
Nie je pre nás žiadna mimoriadne zlá vec používať JavaScript na posúvanie efektov. V skutočnosti existujú komplikovanejšie prípady nemožno vyriešiť bez JavaScript. Avšak existujú CSS hacks ktoré môžu tieto skripty nahradiť.
Tento príspevok vám ukáže how vytvoriť pätu odhaliť účinky na stránku listovať pomocou CSS. Použijeme dva prípady použitia na preukázanie tohto: jeden pre celú stránku (pozri demo) a jeden pre jednotlivé prvky stránky, ako napríklad články.
Celá strana
Musíme vytvoriť pätu zobrazuje sa pod touto stránkou zatiaľ čo používateľ posúva nadol. Tiež, keď sú rolovanie stránky späť, musí päta skryť pod touto stránkou.
Aby sme dosiahli tento cieľ, najprv musíme vytvoriť päta s pevnou polohou v spodnej časti obrazovky.
1. Vytvorte pevný päty
Poďme pridajte nejaký obsah a pätu na stránku prvú. Používam značky HTML V mojom demo je v päte zobrazený netopierový obrázok, ktorý nie je tak strašidelný, ale môžete si vybrať ľubovoľný iný obrázok, ktorý sa vám páči. Lorem ipsum dolor sedieť amet ... Prechod na CSS, odstráňte akýkoľvek priestor okolo Uveďte niektoré rozmery ( Použiť Farba ako Nastaviť Týmto spôsobom bude mať spodok dostatok miesta pre pätu byť viditeľné keď používateľ posúva stránku nadol. To je všetko. Päta odhaľuje účinok pre celú webovú stránku. Pozrite si demoverziu Codepen nižšie. Táto technika môže byť použitá pre individuálny prvok HTML (so zápästom), ktorý je dosť dlhý pre správny efekt rolovania stránky. Metóda je trochu nepríjemná, pretože v súčasnosti nefunguje v prehliadačoch Chrome a IE, ale má slušnú zálohu. Po prvé, vytvoríme dlhý článok so zápästou. Na podporu sémantického kódu som si vybral Lorem ipsum dolor sedieť amet ... Nižšie uvidíte základný styling výrobku a päty. Môj článok momentálne vyzerá takto. Samozrejme môžete použiť aj iné základné pravidlá. Predchádzajúca päta bola opravená, toto sa chystá byť lepkavý. Použiť Môžete nastaviť svoju hodnotu podľa vašej chuti, pretože určuje miesto, kde sa zápätie začne zobrazovať alebo zmizne, keď používateľ posúva nadol alebo nahor. Dajte rovnaká hodnota pre spodný okraj výrobku, takže v spodnej časti je dostatok miesta na odhalenie plnej päty. Teraz potrebujeme otvorenie vedľa spodnej časti článku cez ktoré môžeme vidieť lepkavé päty posúvanie nadol a nahor. Aby ste to dosiahli, nahraďte Nakoniec, poďme umiestnite pätu za článok pomocou A to je to, že element jednotlivých stránok s efektom odhalenia on-scroll sa robí. Pozrite sa na pero Codepen nižšie. Obidve prípady používania nájdete aj na našej stránke Github. a pre sémantiku. však,
Posúvajte sa, kým sa nezobrazí päta
značka podľa nastavenie okrajov na hodnotu 0, a urobte to dostatočne dlho pridaním vlastnej výšky na vyvolanie posúvania (ak je obsah tela vo vašej stránke dostatočne dlhý na to, aby ste spôsobili posúvanie, nemusíte mu dať výšku).šírka a výška) do päty a jeho pozíciu do dolnej časti obrazovky pomocou tlačidla pozícia: pevná; a dno: 0; vlastnosti. telo font-family: Crimson Text; veľkosť písma: 13pt; rozpätie: 0; päta šírka: 100%; výška: 200px; pozícia: pevná; dno: 0; farba pozadia: # DD5632;
2. Skryť zápätie
z-index: -1 pravidlo na zápätie, aby sa umiestnite ho za všetky ostatné prvky na stránke. a tagy biele, aby sa pokryť zápätie. telo, html farba pozadia: #fff; päta šírka: 100%; výška: 200px; pozícia: pevná; dno: 0; farba pozadia: # DD5632; z-index: -1;
3. Upravte dolnú hranicu
margin-bottom z štítok rovná výške päty (v mojom príklade 200px). telo výška: 1000px; rozpätie: 0; margin-bottom: 200px;
Jednotlivé prvky stránky
1. Vytvorte dlhý článok
a .
Článok 1
článok width: 500px; background-color: # FEF9F3; polstrovanie: 20px 40px; článok> päta výška: 100px; farba pozadia: # FE0178; telo font-family: cormorant garamond;
2. Zostavte záložku Sticky
Pozícia: lepkavý pravidlo na zápätie, takže sa bude pohybovať vo vnútri hraníc článku, ale stále udržiava svoju pozíciu na obrazovke, zatiaľ čo používateľ posúva hore a dole. článok> päta výška: 100px; farba pozadia: # FE0178; pozícia: -webkit-sticky; pozícia: lepkavá; dno: 80px;
bottom: 80px pravidlo určuje pozíciu päty 80px nad spodkom článku. článok width: 500px; background-color: # FEF9F3; polstrovanie: 20px 40px; margin-bottom: 80px;
3. Pridajte čiastočne priehľadné pozadie
farba pozadia článku s lineárny gradient background-image, ktorý je od hornej časti článku k hornej časti päty farebné s farbou pozadia výrobku a zvyšná časť na dne je transparentné. článok width: 500px; polstrovanie: 20px 40px; obrázok na pozadí: lineárny gradient (dole, # FEF9F3 calc (100% - 120px), priehľadný 0); margin-bottom: 80px;
vypočítané (100% -120px) Funkcia CSS vypočíta hodnotu celková výška výrobku mínus päta. V mojom príklade je to 120 pixlov (100 pixlov na výšku + 20px pre polstrovanie).
4. Umiestnite pätu späť
z-index: -1 Pravidlo CSS. článok> päta výška: 100px; farba pozadia: # FE0178; pozícia: -webkit-sticky; pozícia: lepkavá; dno: 80px; z-index: -1;
