Come creare CSS Sticker Footer
Normalmente, abbiamo bisogno di JavaScript per eseguire effetti di scorrimento relativo a diverse azioni dell'utente sulle pagine web. La sceneggiatura fa il lavoro di rintracciare lo scorrimento verso l'alto o verso il basso richiede una pagina, e innesca un'azione quando viene raggiunta un'altezza di soglia.
Non è particolarmente brutto usare JavaScript per scorrere gli effetti. In realtà ci sono casi più complicati che sono impossibile da risolvere senza JavaScript. Comunque ci sono Hack CSS questo può sostituire questi script a volte.
Questo post ti mostrerà iow per creare il footer rivelare gli effetti sullo scroll della pagina usando i CSS. Utilizzeremo due casi d'uso per dimostrarlo: uno per l'intera pagina (vedere la demo) e uno per i singoli elementi della pagina, come gli articoli.
Pagina intera
Dobbiamo creare un footer appare da sotto la pagina mentre l'utente sta scorrendo verso il basso. Inoltre, quando stanno scorrendo la pagina di backup il footer deve essere nascosto di nuovo sotto la pagina.
Per raggiungere questo obiettivo, per prima cosa dobbiamo creare un footer con posizione fissa nella parte inferiore dello schermo.
1. Creare un piè di pagina fisso
Diamo aggiungi del contenuto e un piè di pagina prima alla pagina. Sto usando i tag HTML Nella mia demo, c'è un'immagine di pipistrello mostrata all'interno del footer per un effetto non così spettrale, ma puoi scegliere qualsiasi altra immagine che ti piace. Lorem ipsum dolor sit amet… Passaggio a CSS, rimuovere qualsiasi spazio attorno a Dare alcune dimensioni ( Applicare il Colora sia il Impostare il In questo modo ci sarà spazio sufficiente in basso per il piè di pagina essere visibile quando l'utente scorre verso il basso la pagina. Questo è tutto. Il piè di pagina rivela l'effetto di una pagina web completa. Guarda la demo di Codepen qui sotto. Questa tecnica può essere utilizzata per un singolo elemento HTML (con un piè di pagina) abbastanza lungo per un corretto effetto di scorrimento della pagina. Il metodo è un po 'hacky, in quanto attualmente non funziona in Chrome e IE, ma ha un discreto ripiego. Per prima cosa, creiamo un lungo articolo con un piè di pagina. Per promuovere il codice semantico, ho scelto Lorem ipsum dolor sit amet… Qui sotto puoi vedere il stile di base dell'articolo e del piè di pagina. Il mio articolo sembra attualmente questo. Ovviamente puoi usare anche altre regole di stile di base. Il precedente footer è stato corretto, questo sta per essere appiccicoso. Applicare il Il Puoi regolare il suo valore secondo i tuoi gusti, poiché determina il punto in cui il footer inizia a comparire o scomparire mentre l'utente sta scorrendo verso il basso o verso l'alto. Dai il lo stesso valore per il margine inferiore dell'articolo, in modo che ci sia spazio sufficiente in basso per rivelare il piè di pagina completo. Ora abbiamo bisogno un'apertura successiva al fondo dell'articolo attraverso il quale possiamo vedere il footer appiccicoso scorrere verso il basso. Per raggiungere questo, sostituire il Il Finalmente, andiamo posiziona il piè di pagina dietro l'articolo usando il E questo è tutto, il singolo elemento della pagina con l'effetto di rivelazione in scorrimento è fatto. Controlla la penna Codepen qui sotto. Puoi anche trovare entrambi i casi d'uso sulla nostra pagina Github. e per semantica però,
Continua a scorrere finché non vedi il piè di pagina
tag by impostazione dei margini su 0, e renderlo abbastanza lungo da aggiungendo un'altezza personalizzata per indurre lo scorrimento (se il contenuto del corpo nella pagina è abbastanza lungo da causare lo scorrimento, non è necessario dargli un'altezza).larghezza e altezza) al piè di pagina, e correggi la sua posizione nella parte inferiore dello schermo con il posizione: fissa; e fondo: 0; proprietà. body font-family: Crimson Text; dimensione carattere: 13pt; margine: 0; footer width: 100%; altezza: 200 px; posizione: fissa; fondo: 0; background-color: # DD5632;
2. Nascondi il piè di pagina
z-index: -1 regola al footer per posizionalo dietro tutti gli altri elementi sulla pagina. e etichetta bianca per coprire il piè di pagina. body, html background-color: #fff; footer width: 100%; altezza: 200 px; posizione: fissa; fondo: 0; background-color: # DD5632; z-index: -1;
3. Regolare il margine inferiore
margin-bottom del etichetta uguale all'altezza del footer (nel mio esempio 200px). body height: 1000px; margine: 0; margin-bottom: 200px;
Elementi di pagina individuali
1. Creare un articolo lungo
e .
Articolo 1
article width: 500px; background-color: # FEF9F3; imbottitura: 20px 40px; articolo> footer height: 100px; colore di sfondo: # FE0178; body font-family: cormorano garamond;
2. Rendere appiccicoso il piè di pagina
Posizione: appiccicoso regola al piè di pagina, quindi si muoverà all'interno dei confini dell'articolo ma ancora mantenere la sua posizione sullo schermo mentre l'utente sta scorrendo su e giù. articolo> footer height: 100px; colore di sfondo: # FE0178; posizione: -webkit-sticky; posizione: appiccicosa; fondo: 80 px;
bottom: 80px regola fissa la posizione del piè di pagina 80 px sopra il fondo dell'articolo. article width: 500px; background-color: # FEF9F3; imbottitura: 20px 40px; margin-bottom: 80px;
3. Aggiungi uno sfondo parzialmente trasparente
colore di sfondo dell'articolo con a gradiente lineare immagine di sfondo, che dalla parte superiore dell'articolo è in cima al piè di pagina colorato con il colore di sfondo dell'articolo, e la parte rimanente in fondo è reso trasparente. article width: 500px; imbottitura: 20px 40px; background-image: linear-gradient (in basso, # FEF9F3 calc (100% - 120px), trasparente 0); margin-bottom: 80px;
calc (100% -120px) La funzione CSS calcola il altezza totale dell'articolo meno il piè di pagina. Nel mio esempio, è 120 px (100 px per altezza + 20px per imbottitura).
4. Posiziona il piè di pagina indietro
z-index: -1 Regola CSS. articolo> footer height: 100px; colore di sfondo: # FE0178; posizione: -webkit-sticky; posizione: appiccicosa; fondo: 80 px; z-index: -1;
