Die neu gestartete Website, The Markup, bietet einen überzeugenden Slogan: "Big Tech beobachtet Sie. Wir schauen BigTech an." Der beeindruckende Inhalt der Site wird von Upstatement entwickelt und wird durch das ausgefeilte Design und seine Technologie übereinstimmt. Zu den bemerkenswerten Merkmalen gehören saubere Typografie, ein einzigartiges Layout, auffällige abgewinkelte Schwebebereicheffekte auf Inhaltsblöcke und ein subtiles, aber elegantes DOT -Motiv.

Ein besonders bemerkenswertes Element ist die geschickt gestaltete Fußzeile. Unter dem Hauptinhalt gleitet es reibungslos in die Ansicht, wenn der Benutzer auf die Seite der Seite scrollt. Lassen Sie uns untersuchen, wie Sie diesen Effekt nachstellen!

Der Schlüssel zu diesem Effekt liegt in diesen vier Elementen:

1. Der Hauptinhaltsbereich muss eine minimale Höhe von 100 VH haben. Während die meisten Websites dies bereits einhalten, ist dies für eine zuverlässige Funktionalität von entscheidender Bedeutung.
2. Der Hauptinhaltsbereich erfordert eine solide Hintergrundfarbe, um die Fußzeile zu maskieren, bevor er in die Sicht schiebt.
3. Die Fußzeile ist in die html nach dem Hauptinhalt. Relative Positionierung und Z-Index-Anpassungen stellen sicher, dass der Hauptinhalt oben bleibt.
4. Die klebrige Positionierung wird verwendet, um die Fußzeile bis zum Ende des Ansichtsfensters zu verankern.

Dieser klebrige Positionierungsansatz ist der Methode des Markups überlegen, die auf Position beruht: behoben; und ein berechnetes margin-bottom Wert auf dem Hauptinhalt. Durch das Vermeiden von willkürlichen Werten wird die Implementierung wesentlich robuster und anpassungsfähiger.

Die Einfachheit und Wirksamkeit dieser klebrigen Positionierungstechnik sind bemerkenswert. Vielen Dank an Stephen Shaw für diese clevere Lösung! Mein erster Versuch verwendete feste Positionierung und erforderliche manuelle Anpassungen, wobei die Überlegenheit dieses klebrigen Ansatzes hervorgehoben wurde.

preethi zeigte im Jahr 2018 eine ähnliche Technik. Der Hauptunterschied ist hier die Verwendung eines linearen Gradienten für den Hintergrund des Körpers und bietet eine flexible Alternative zu einer soliden Hintergrundfarbe, die in bestimmten Designkontexten möglicherweise einschränkend sein könnte.

Video Tutorial

Ein Video -Tutorial von Stephen Shaw ist verfügbar!