Jak vytvořit Sticky zápatí pouze CSS
Normálně potřebujeme JavaScript provádět efekty posouvání související s různými činnostmi uživatele na webových stránkách. Skript provádí úlohu sledování toho, jak daleko rolování nahoru nebo dolů má stránku, a spustí akci při dosažení prahové výšky.
Není to nic špatného používat JavaScript pro rolování efektů. Ve skutečnosti existují komplikovanější případy nelze vyřešit bez JavaScriptu. Existují však CSS hacky které mohou tyto skripty nahradit.
Tento příspěvek vám ukážew vytvořit zápatí odhalit efekty na stránce rolování pomocí CSS. Pro demonstraci použijeme dva případy použití: jeden pro celou stránku (viz ukázka) & jeden pro jednotlivé prvky stránky, například články.
Úplná stránka
Musíme vytvořit zápatí pod stránkou zatímco uživatel posouvá dolů. Také při posouvání stránky zpět zápatí potřebuje být skryt znovu pod stránku.
K dosažení tohoto cíle musíme nejprve vytvořit a zápatí s pevnou polohou v dolní části obrazovky.
1. Vytvořte pevnou zápatí
Pojďme přidat nějaký obsah a zápatí na první stránku. Používám značky HTML V mém ukázce je uvnitř zápatí obrázek netopýra pro ne-tak strašidelný efekt, ale můžete si vybrat jakýkoliv jiný obrázek, který se vám líbí. Lorem ipsum dolor sit amet… Přechod do CSS, odstraňte prostor okolo Uveďte některé rozměry ( Aplikujte Barva obou Nastav Tímto způsobem bude dostatek místa v dolní části zápatí být viditelný když uživatel posouvá stránku dolů. A je to. Je proveden efekt zápatí pro celou webovou stránku. Podívejte se na demoverzi Codepen níže. Tato technika může být použita pro jednotlivý HTML element (se zápatím), to je dostatečně dlouhý pro řádný efekt posouvání stránky. Metoda je trochu hacky, protože v současné době nefunguje v Chrome a IE, ale má slušný výpadek. Nejdříve vytvořme dlouhý článek se zápatím. Pro podporu sémantického kódu jsem zvolil Lorem ipsum dolor sit amet… Níže vidíte základní styling článku a zápatí. Můj článek nyní vypadá takto. Samozřejmě můžete použít i jiná základní pravidla. Předchozí zápatí bylo opraveno, tohle bude být lepkavý. Aplikujte Můžete nastavit jeho hodnotu podle svého vkusu, protože určuje bod, kde se zápatí začne zobrazovat nebo zmizí, zatímco uživatel posouvá dolů nebo nahoru. Dát stejnou hodnotu pro dolní okraj článku, takže ve spodní části bude dostatek místa pro odhalení celého zápatí. Teď potřebujeme otvor vedle spodku výrobku skrz který vidíme lepkavé zápatí rolovat dolů a nahoru. Chcete-li toho dosáhnout, vyměňte Konečně, pojďme umístěte zápatí za článek za použití A to je vše, prvek jednotlivých stránek s efektem on-scroll odhalí. Podívejte se na níže uvedené pero Kodepen. Oba případy použití naleznete také na stránce Github. a pro sémantiku. nicméně,
Pokračujte v posouvání, dokud neuvidíte zápatí
tag by nastavení okrajů na 0, a udělat to dost dlouho přidání vlastní výšky vyvolání rolování (pokud je obsah těla na stránce dostatečně dlouhý, aby způsobil rolování, nemusíte mu dávat výšku).šířka a výška) do zápatí a upevnit jeho polohu do dolní části obrazovky pomocí poloha: pevná; a dole: 0; vlastnosti. tělo rodina fontů: Crimson Text; velikost písma: 13pt; marže: 0; zápatí šířka: 100%; výška: 200px; poloha: pevná; dole: 0; barva pozadí: # DD5632;
2. Skrýt zápatí
z-index: -1 pravidlo zápatí, aby umístěte ho za všechny ostatní prvky na stránce. a značky bílé, aby zakryjte zápatí. body, html background-color: #fff; zápatí šířka: 100%; výška: 200px; poloha: pevná; dole: 0; barva pozadí: # DD5632; z-index: -1;
3. Upravte dolní okraj
spodní okraj z štítek rovná výšce zápatí (v mém příkladu 200px). tělo výška: 1000px; marže: 0; dolní okraj: 200px;
Jednotlivé prvky stránky
1. Vytvořte dlouhý článek
a .
Článek 1
článek width: 500px; barva pozadí: # FEF9F3; polstrování: 20px 40px; článek> zápatí výška: 100px; barva pozadí: # FE0178; tělo font-family: kormorán garamond;
2. Vytvořte zápatí Sticky
poloha: lepkavá pravidlo k zápatí, tak to bude pohybovat uvnitř hranic článku ale přesto udržet svou pozici na obrazovce, zatímco uživatel posouvá nahoru a dolů. článek> zápatí výška: 100px; barva pozadí: # FE0178; pozice: -webkit-lepkavá; poloha: lepkavá; dno: 80px;
dno: 80px pravidlo fixuje pozici zápatí 80px nad spodní částí výrobku. článek width: 500px; barva pozadí: # FEF9F3; polstrování: 20px 40px; dolní okraj: 80px;
3. Přidejte částečně průhledné pozadí
barva pozadí článku s lineární gradient pozadí, který je od horní části článku k horní části zápatí barevné s barvou pozadí a zbývající část na dno je transparentní. článek width: 500px; polstrování: 20px 40px; pozadí-obraz: lineární gradient (ke dnu, # FEF9F3 calc (100% - 120px), transparentní 0); dolní okraj: 80px;
calc (100% -120px) Funkce CSS vypočítává plná výška článku mínus zápatí. V mém příkladu je to 120px (100px pro výšku + 20px pro polstrování).
4. Umístěte zápatí
z-index: -1 CSS pravidlo. článek> zápatí výška: 100px; barva pozadí: # FE0178; pozice: -webkit-lepkavá; poloha: lepkavá; dno: 80px; z-index: -1;
