So erstellen Sie eine Nur-CSS-Sticky-Fußzeile
Normalerweise benötigen wir JavaScript um Bildlaufeffekte ausführen im Zusammenhang mit verschiedenen Benutzeraktionen auf Webseiten. Das Skript macht den Job Verfolgen, wie weit das Blättern nach oben oder unten eine Seite durchläuft, und löst eine Aktion aus wenn eine Schwellenhöhe erreicht ist.
Es ist keine besonders schlechte Sache, JavaScript für Scrolleffekte zu verwenden. In der Tat gibt es kompliziertere Fälle Ohne JavaScript nicht zu lösen. Es gibt jedoch CSS-Hacks das kann diese Skripte manchmal ersetzen.
Dieser Beitrag wird Ihnen zeigen, how Zum Erstellen von Fußzeileneffekten für das Scrollen mit der Seite mithilfe von CSS. Wir werden zwei Anwendungsfälle verwenden, um dies zu demonstrieren: einen für die gesamte Seite (siehe Demo) und einen für einzelne Seitenelemente, z. B. Artikel.
Volle Seite
Wir müssen eine Fußzeile erstellen erscheint unterhalb der Seite während der Benutzer nach unten blättert. Wenn Sie die Seite nach oben scrollen, muss die Fußzeile ebenfalls angezeigt werden versteckt sein wieder unter der Seite.
Um dieses Ziel zu erreichen, müssen wir zuerst eine Fußzeile mit fester Position am unteren Rand des Bildschirms.
1. Erstellen Sie eine feste Fußzeile
Lasst uns Fügen Sie etwas Inhalt und eine Fußzeile hinzu zuerst zur Seite. Ich verwende die HTML-Tags In meiner Demo wird in der Fußzeile ein Fledermausbild angezeigt, das einen nicht so gruseligen Effekt erzeugt. Sie können jedoch auch ein beliebiges anderes Bild auswählen. Lorem ipsum dolor sitzen amet… Umstellung auf CSS, Leerzeichen entfernen um die Einige Maße angeben ( Wende an Färben sowohl die Stellen Sie das ein Auf diese Weise bleibt unten genug Platz für die Fußzeile sei sichtbar wenn der Benutzer auf der Seite nach unten blättert. Das ist es. Der Fußzeileneffekt für eine vollständige Webseite ist fertig. Schauen Sie sich die Codepen-Demo unten an. Diese Technik kann für ein einzelnes HTML-Element (mit Fußzeile) verwendet werden lang genug für einen richtigen Seiten-Scroll-Effekt. Die Methode ist etwas hackig, da sie derzeit in Chrome und IE nicht funktioniert, aber sie hat einen anständigen Fallback. Zuerst erstellen wir einen langen Artikel mit einer Fußzeile. Um semantischen Code zu fördern, habe ich gewählt Lorem ipsum dolor sitzen amet… Unten sehen Sie die grundlegendes Styling des Artikels und der Fußzeile. Mein Artikel sieht derzeit so aus. Natürlich können Sie auch andere grundlegende Stilregeln verwenden. Die vorherige Fußzeile wurde korrigiert, diese wird jetzt angezeigt sei klebrig. Wende an Das Sie können den Wert an Ihren Geschmack anpassen, da er bestimmt, wann die Fußzeile angezeigt oder ausgeblendet wird, während der Benutzer nach oben oder unten blättert. Gib die gleicher Wert für den unteren Rand des Artikels, so dass unten genug Platz vorhanden ist, um die volle Fußzeile anzuzeigen. Jetzt brauchen wir eine Öffnung am Ende des Artikels Durch diese können wir die klebrige Fußzeile sehen, die auf und ab scrollen. Um dies zu erreichen, ersetzen Sie das Das Zum Schluss noch Platzieren Sie die Fußzeile hinter dem Artikel Verwendung der Und das ist es, das einzelne Seitenelement mit dem On-Scroll-Effekt. Schauen Sie sich den Codepen-Stift unten an. Beide Anwendungsfälle finden Sie auch auf unserer Github-Seite. und für Semantik. jedoch,
Scrollen Sie weiter, bis Sie die Fußzeile sehen
tag durch Ränder auf 0 setzen, und machen es lange genug durch Hinzufügen einer benutzerdefinierten Höhe um das Scrollen zu induzieren (wenn der Hauptinhalt auf Ihrer Seite lang genug ist, um das Scrollen zu bewirken, müssen Sie ihm keine Höhe zuweisen).Breite und Höhe) zur Fußzeile und Position fixieren zum unteren Rand des Bildschirms mit der Position: feststehend; und unten: 0; Eigenschaften. body font-family: Crimson Text; Schriftgröße: 13pt; Marge: 0; Fußzeile Breite: 100%; Höhe: 200px; Position: feststehend; unten: 0; Hintergrundfarbe: # DD5632;
2. Blenden Sie die Fußzeile aus
z-Index: -1 Regel in der Fußzeile um Platziere es hinter allen anderen Elementen auf der Seite. und Tags weiß um bedecken Sie die Fußzeile. body, html Hintergrundfarbe: #fff; Fußzeile Breite: 100%; Höhe: 200px; Position: feststehend; unten: 0; Hintergrundfarbe: # DD5632; z-Index: -1;
3. Passen Sie den unteren Rand an
Rand unten des Etikett gleich der Höhe der Fußzeile (in meinem Beispiel 200px). Körper Höhe: 1000px; Marge: 0; Rand unten: 200px;
Einzelne Seitenelemente
1. Erstellen Sie einen langen Artikel
und .
Artikel 1
Artikel Breite: 500px; Hintergrundfarbe: # FEF9F3; Polsterung: 20px 40px; article> footer height: 100px; Hintergrundfarbe: # FE0178; body Schriftfamilie: Kormoran Garamond;
2. Machen Sie die Fußzeile klebrig
Position: klebrig Regel in der Fußzeile, so bewegt es sich innerhalb der Grenzen des Artikels aber trotzdem Position beibehalten auf dem Bildschirm, während der Benutzer auf und ab blättert. Artikel> Fußzeile Höhe: 100px; Hintergrundfarbe: # FE0178; Position: -webkit-klebrig; Position: klebrig; unten: 80px;
unten: 80px Die Regel legt die Position der Fußzeile fest 80px über der Unterseite des Artikels. Artikel Breite: 500px; Hintergrundfarbe: # FEF9F3; Polsterung: 20px 40px; Rand unten: 80px;
3. Fügen Sie einen teilweise transparenten Hintergrund hinzu
Hintergrundfarbe des Artikels mit einem linearer Gradient Hintergrundbild, die von der Oberseite des Artikels bis zur Oberseite der Fußzeile ist farbig mit der Hintergrundfarbe des Artikels und der verbleibende Teil nach unten ist transparent gemacht. Artikel Breite: 500px; Polsterung: 20px 40px; Hintergrundbild: linearer Gradient (nach unten, # FEF9F3 berechnet (100% - 120px), transparent 0); Rand unten: 80px;
berechnet (100% -120px) Die CSS-Funktion berechnet die volle Höhe des Artikels abzüglich der Fußzeile. In meinem Beispiel sind es 120px (100px für Höhe) + 20px zum Auffüllen).
4. Platzieren Sie die Fußzeile zurück
z-Index: -1 CSS-Regel. Artikel> Fußzeile Höhe: 100px; Hintergrundfarbe: # FE0178; Position: -webkit-klebrig; Position: klebrig; unten: 80px; z-Index: -1;
