Web-Elemente mit fester Position
Die Verwendung von Elementen mit fester Position hat an Popularität zugenommen und wurde zu einem gemeinsamen Element im Internet.
Bei dieser Technik wird ein Element im Browser fixiert, während der Rest der Seite scrollt. Meistens finden wir dies an Header-Elementen, einschließlich der Hauptnavigation für eine Site. Dies ist auch ein beliebter Ansatz auf Seiten mit einer einzelnen Seite, wo die Navigation in der Seite immer vorhanden sein muss. Wir finden auch verschiedene Elemente von Webseiten, die mit solchen Techniken gesperrt sind.
Es gibt viele Situationen, die wir finden können, wenn das Fixieren eines Elements auf der Seite eine gute Sache ist, aber es kommt alles auf einen einzigen Zweck zurück. In fast allen dieser Situationen behält das fixierte Element jederzeit einen kritischen Teil der Seite vor den Benutzern.
Die Bedeutung dieser Elemente variiert, aber zu einem gewissen Grad besteht das grundlegende Ziel darin, einen Teil der Seite ständig im Ansichtsport zu halten.
Wenn Sie diese Technik in Betracht ziehen, empfehle ich Ihnen dringend, genau zu überlegen, warum und wie Sie dies tun. Denken Sie daran, dass der Teil Ihrer Seite, der sich nicht bewegt, automatisch viel Aufmerksamkeit auf sich zieht. Also stellen Sie sicher, dass Sie es zur Arbeit bringen. Lass uns eintauchen!
Feste Header
Feste Header sind bei weitem das am häufigsten verwendete Fixpositionselement, so sehr, dass ich tatsächlich damit beginnen musste, diese Sammlung hinzuzufügen, um zu viele Samples zu vermeiden. Meistens ist die Kopfzeile an Ort und Stelle fixiert, um sicherzustellen, dass die Navigation der Seiten immer vorhanden ist. Wie ich bereits erwähnt habe, trifft dies insbesondere auf eine einzelne Seite zu.
Es gibt viele feine Unterschiede in der Handhabung fester Header, daher werden wir einige Beispiele für verschiedene Ideen zu diesem Ansatz betrachten.
Freckles & Handsome
Dies würde ich als klassisches Beispiel für diese Technik betrachten. Die Kopfzeile wird beim Scrollen durch die Site fixiert. Dies beinhaltet das Logo und die wichtigsten Navigationselemente. Darüber hinaus handelt es sich um eine einseitige Website. Durch einen Klick auf die Hauptnavigation gelangen Sie zum entsprechenden Teil der Seite.
In solch einem Fall macht der sticky header das Browsen auf der einzelnen Seite einfach. Es vermeidet auch eine der nervigeren Aspekte vieler einzelner Seiten-Seiten: wenn die Navigation nur am oberen Rand der Seite ist, aber sie scrollt ewig weiter. Daher sieht der fixierte Header nicht nur gut aus und hält das Haupt-Branding der Site in der Mitte, sondern stellt auch sicher, dass die Site einfach zu verwenden ist.
Mapalong
In diesem Beispiel wird ein fester Header verwendet, jedoch mit einer eigenen kleinen Drehung. Diese Site ist ebenfalls ein einzelnes Seitenlayout, aber es fehlt jegliche Seitennavigation. In diesem Fall enthält die feste Kopfzeile das Hauptlogo und eine Anmeldeschaltfläche, beides sehr wichtige Elemente. Aber, noch besser, wenn Sie die Seite herunterscrollen, bewegt sich der Hauptaufruf zur Aktion in die Kopfzeile, wenn er nicht mehr angezeigt wird. Daher ist der primäre Konvertierungspunkt für die Site immer sichtbar. Und doch, noch besser, der Akt des Handlungsaufrufs rückt die Aufmerksamkeit des Anwenders auf sich und unterstreicht den Umwandlungspunkt im Design! Meiner Meinung nach eine brillante Verwendung des Ansatzes.
Kisko Labore
Ein weiterer cleverer Ansatz für den Fixed-Position-Header ist eine Technik, die ich Slide and Stick nenne. Auf der Kisko Labs-Website wird nur ein Teil des Headers angezeigt. Während Sie die Seite nach unten scrollen, scrollt auch die Hauptnavigation. Das ist, bis es den oberen Rand des Bildschirms erreicht, dann bleibt es dort. So gleitet die Navigation (oder scrollt) wie normal und bleibt dann oben.
Ein zusätzliches Detail, das wirklich schön ist, ist, wie die Navigation den Teil der Seite hervorhebt, den Sie gerade betrachten. Da es sich um ein Einzelseiten-Design handelt, ist es hilfreich, wenn der aktuelle Teil der Seite mit dem normalen Status "Aktuelle Seite" einer Navigation identifiziert wird.
Hebe das Dach
Eine übliche Erweiterung dieses Stils besteht darin, ein gewisses Maß an Transparenz in die klebrige Ebene einzubauen. In vielen der Beispiele, die Sie hier finden, geschieht dies, indem Sie einfach eine unebene Kante zum klebrigen Element haben. Manchmal geschieht dies, indem ein Element von der festen Stange hervorsteht, manchmal mit einer gezackten Kante. Auf der Raise the Roof Site wurde mit einer sehr organischen und fast zufälligen Grenze gearbeitet.
In diesem Beispiel finden wir ein interessantes visuelles Ergebnis. Durch die Verwendung von überlappenden Elementen erzeugt die Site visuelle Tiefe, während der Inhalt hinter der Kopfzeile blättert. Dies wird durch den ebenfalls fixierten Mond im Hintergrund noch verstärkt. Das Endergebnis sind drei visuelle Ebenen. Eine solche Tiefe fügt ein hohes Maß an visuellem Interesse hinzu und kann ein visuell auffälliges Design erzeugen.
Willkommen im Wasser
Die Welcome to the Water Site ist eine eher ungewöhnliche Kreation. Sehr wenig über diese Website entspricht den Normen des Weblayouts und -designs. Von besonderem Interesse für das Thema dieses Artikels ist der feste Header. Auf dieser Site dient dieses fixierte Element als Navigationswerkzeug für die Site. Aber in vielerlei Hinsicht hat es eher ein Toolbar-Feeling.
Zusätzliche Beispiele für feste Header
Hier sind einige zusätzliche Beispiele für feste Header. Sie finden hier eine große Auswahl an Stilen und feinen Variationen.
Tam Cai
Marlon Messam
Großes Auge kreativ
Balencic kreative Gruppe
Ivo Mynttinen
Krista Ganelon
Creattica
Ian James Cox
Mach bessere Apps
Matthew Carleton
Shweeplantis
TruQua
Rodolphe Celestin
Holcomb-Gitarren
Trussystem
Feste Fußzeilen
Das offensichtlichste Gegenteil zum festen Header wäre die feste Fußzeile. In solchen Fällen bleibt die Fußzeile der Seite am unteren Bildschirmrand hängen. Während der Benutzer scrollt, bleibt das Element an seinem Platz.
Wie bei jedem anderen festen Element ist die Schaffung eines Schwerpunkts immer noch das Hauptziel. Interessanterweise geht es bei Fußzeilen wie diesen meist um eine sekundäre Funktion, die immer noch ein primäres Ziel ist.
Bleifreie Gruppe
Die Website der unverbleiten Gruppe ist ein Paradebeispiel dafür. Hier enthält die feste Fußzeile Elemente, die aktionsorientiert sind und auf den Kern der Site zielen. Beachten Sie zunächst, dass alle Elemente in dieser Leiste Funktionen sind, die ein Benutzer ausführen kann: Sie können sie auf sozialen Medien bewerben, einen Telefonanruf tätigen oder eine E-Mail senden. Zweitens sind sie die primären Aktionsgegenstände, die die Agentur höchstwahrscheinlich von Ihnen erwarten würde. Entweder möchten Sie, dass Sie für sie werben oder sie kontaktieren. Dies sind die Hauptgründe für eine solche Site. Es macht also Sinn, sie an Ort und Stelle zu fixieren, wo sie viel Aufmerksamkeit bekommen.
Envato
Die Envato-Site hat auch eine feste Fußzeile. Hier enthält die Leiste das Hauptlogo der Seite, welches interessanterweise von oben links hierher verschoben wurde. Für eine Marke wie Envato ist das kein Problem. Außerdem finden Sie eine Reihe von Dropdown-Menüs, die Sie auf ihre verschiedenen Web-Eigenschaften starten. Diese einfache Funktion ist ihr eigentliches Ziel. In der Tat könnte man sagen, dass diese Geschäftsprofilseite nicht wirklich dort ist, wo die Leute enden sollen. Daher ist der Fokus auf die Rückkehr zu ihren Content-Websites prominent und unvermeidlich.
Kiyuco
Für viele Websites wie diese sind ihre E-Mail-Marketing-Programme von entscheidender Bedeutung. Daher kann eine fest platzierte Fußzeile, die das Anmeldeformular deutlich hervorhebt, einen großen Beitrag zum Aufbau solcher Mailinglisten leisten. Kann E-Mail-Marketing Ihnen dabei helfen, Ihre Website über einen längeren Zeitraum zu bewerben und Kunden effektiver zu verfolgen? Wenn ja, wäre vielleicht eine feste Fußzeile wie diese ein großartiges Werkzeug.
Feste Seitenleisten
Das Sperren von Elementen einer Webseite ist nicht nur auf Kopf- und Fußzeilen beschränkt, auch wenn sie am beliebtesten sind. Es scheint, dass eine feste Position Sidebar eine enge Sekunde ist.
Ortsgebundene Seitenleisten enthalten oft sehr ähnliche Informationen wie in einer Kopfzeile. Dies beinhaltet Dinge wie Logos, Navigation und Social-Media-Tools. Hier einige Beispiele, die Sie berücksichtigen sollten, wenn Sie diesen Ansatz verwenden möchten.
Jorge Rigabert
Diese wunderschöne Seite ist ein perfektes Beispiel für den Stil bei der Arbeit. Hier enthält die Seitenleiste die primären Branding- und Navigationsoptionen der Websites. Dieser Sidebar-Ansatz ist großartig, weil er die Navigation beim Scrollen der Seite im Blick behält, aber auch, weil er sich nicht mit dem Inhalt schneidet, während er sich bewegt. Obwohl dies eine subtile Unterscheidung ist, sorgt es für eine unglaublich glatte Oberfläche. Websites wie diese zeigen eine Eleganz, die einfach erscheint, aber unglaublich schwierig ist.
Mehr Gefahren Mehr Helden
Ich mag die Art, wie diese Seite funktioniert. Die festen Elemente in der Seitenleiste sind die Kernfunktionen, die die Websitebetreiber von Ihnen erwarten. Mehr als alles andere wollen sie, dass du die Musik hörst! So ist die prominente und dauerhaft auf dem Bildschirm "Play" -Funktion bereit und wartet. Ich kann mir kein kritischeres Element auf der Site vorstellen und es so gut sichtbar machen zu lassen, dass es so gut sichtbar ist. Und Sie müssen es lieben, dass es nicht in einer anstößigen Weise präsentiert wurde; Es spielt nicht einmal automatisch. Ein großes Lob an den Designer, der diese Versuchung kontrollierte.
Yowza
Manchmal ist es wünschenswert, ein einzelnes klebriges Element zu erstellen, das eine bestimmte Funktion fördert. Wir haben dies mit verschiedenen Feedback- und Support-Services gesehen, die Sie in Ihre Site integrieren können. In diesem Fall wurde ein Facebook-ähnlicher Button an der Seite der Site angebracht. Es bleibt an Ort und Stelle, während Sie die Seite scrollen. Dies lenkt natürlich die Aufmerksamkeit des Benutzers auf das Element und ermutigt ihn, es zu benutzen. Ich würde sagen, dies zeigt die Macht und Bedeutung von sozialen Empfehlungen in einem Web-basierten Geschäft wie diesem.
Als eine Randnotiz liebe ich die Drehung der Seite auf der 10px oberen Grenze, die so populär geworden ist. Hier scrollt das Element einfach vorbei. Keine dramatische Animation, aber etwas daran macht Spaß und fügt der Seite eine Ebene von Interesse und Leben hinzu.
Fett-Mann-Kollektiv
Diese Site folgt allen Mustern, die wir in unseren vorherigen Samples gefunden haben. Aber es zeichnet sich durch eine einfache Animation aus. Während Sie die Seite nach unten scrollen, wird der Charakter in der Seitenleiste animiert und läuft. Dieses Element hebt den Ort im Alleingang in eine einzigartige und denkwürdige Kategorie. Wie kommt es, dass etwas so Triviales eine solche Auswirkung haben kann? Es braucht diese einfache Seite und pumpt es voller Großartigkeit. Es zeigt, dass die dahinter stehende Agentur es liebt, ihre Arbeit mit den letzten Feinheiten zu polieren, für die jeder Kunde sterben wird.
Mehr feste Seitenleistenelemente
Hier sind einige zusätzliche Beispiele für feste Seitenleisten bei der Arbeit.
Dumme Gedichte
Colin McKinney
Informant
Das ist Marcela
Janette D. Rat
Nur Logo
Ein Ansatz, den wir nicht oft finden, ist ein Fixed-Position-Logo. In diesem Beispiel wurde das Logo an der richtigen Stelle eingerastet, auch wenn die Seite scrollt. Dieser atypische Ansatz hält den Namen der Site in der Mitte und in der Mitte. Designs wie dieses können interessant sein. Es ist wirklich schwer zu erraten, warum sie das getan haben, aber man kann nur annehmen, dass das Hauptbranding von entscheidender Bedeutung ist. Vielleicht haben sie viele ähnliche Konkurrenz? Vielleicht möchten sie nur sicherstellen, dass Sie sich an ihren Namen erinnern? Unabhängig davon ist es eine interessante Technik, die es zu beachten gilt, wenn sie für Ihr Projekt gilt.
"Zurück nach oben"
Wenn es um wirklich lange Seiten geht, ist es eine nette Funktion, einen Link hinzuzufügen, der Sie zum Anfang der Seite führt. Und mit klebrigen Elementen können Sie einen solchen Link erstellen, der an der gleichen Stelle bleibt, an der Sie die Seite durchlaufen. Genau das haben die hier bereitgestellten Beispiele getan.
Am häufigsten wird ein solches Element direkt außerhalb des Layouts platziert. Auf diese Weise stört es nichts anderes im Design, während es die Seite durchläuft. Sie werden auch bemerken, dass diese Elemente häufig einen nach oben weisenden Pfeil haben - vielleicht ein naheliegendes Element, aber es ist sehr wichtig daran zu denken, da es den Benutzer schnell über seinen Zweck informiert.
Dieser Ansatz kontrastiert etwas mit der Vorstellung eines klebrigen Headers. In diesem Fall befindet sich die Navigation meistens nur oben auf der Seite. Daher ist es wichtig, dorthin zurückzukehren, da es den Leuten ermöglicht, Inhalte der Websites schnell abzulegen. Im Fall von Single-Page-Sites kann dies jedoch ein lästiger zusätzlicher Schritt sein.
Überlappungen
Dieses Beispiel zeigt, dass das Element "Zurück zum Anfang" nicht angezeigt wird, es sei denn, Sie befinden sich nicht ganz oben auf der Seite. Vielleicht ein offensichtliches Detail zu enthalten, aber wie Sie finden werden, ist es nicht immer der Fall. Ein Teil der Macht in diesem Ansatz ist, dass die Tatsache, dass es erscheint, die Aufmerksamkeit darauf richtet, um sicherzustellen, dass ein Benutzer sich dessen bewusst ist.
Zwei weitere Proben
Die beiden folgenden Beispiele haben beide Schaltflächen "Zurück zum Anfang", obwohl sie immer sichtbar sind. Es ist für mich interessant, dass dieses Element am häufigsten in der unteren rechten Ecke des Bildschirms platziert wird. Es ist nicht der prominenteste Teil des Designs, also ist es vielleicht sekundär, dass es für solch ein weniger wichtiges Element gut ist. Sie werden jedoch feststellen, dass das Element immer noch hervorgehoben wird, indem Sie die Grenzen und mit kräftigen Farben brechen. Ich nehme an, die Moral der Geschichte besteht darin, ihre Bedeutung für die Verwendung Ihres Designs zu berücksichtigen. Wenn es den Unterschied macht, stellen Sie sicher, dass es sichtbar ist.
Wildcard-Denken
Dusanka und David
Mehrere feste Elemente
In diesem letzten Beispiel betrachten wir eine Website mit vielen festen Elementen auf der Seite. In vielerlei Hinsicht bricht diese Seite mit den meisten Normen des Webdesigns und Layouts. Außer dem Logo in der oberen linken Ecke ist fast nichts an seinem üblichen Platz.
Auf der Grundlage dieses Artikels finden wir jedoch einige Elemente, mit denen wir vertraut sind, z. B. die feste Seitenleiste. Sie werden jedoch feststellen, dass zwei andere nicht typisch sind. Zum Beispiel die feste Fußzeile, die einige seitenweite Links enthält. Dinge wie Datenschutzerklärungen und Geschäftsbedingungen rechtfertigen selten eine derart herausragende Position auf einer Seite. Aber hier finden Sie sie mit einigen anderen wichtigen Navigationslinks auf der Seite.
Ich mag es wirklich, wie sie die Benutzerkonto-Links in der oberen rechten Ecke angeheftet haben. Hier werden sie häufig platziert, obwohl sie dort selten fixiert sind, unabhängig vom Scrollen wie in diesem Fall. Ich mag das, weil es sicherstellt, dass Sie immer schnell Zugang zu den Funktionen des Mitglieds erhalten; etwas, von dem vielleicht einige andere Apps und Websites profitieren könnten.
Alles in allem ist diese Seite alles andere als normal, aber etwas daran funktioniert unglaublich gut und ist einfach zu lieben. Sein ungewöhnliches Layout macht es nicht schwer zu bedienen und das Endergebnis ist eine eindeutige und angenehme Erfahrung.
Ressourcen
Zu guter Letzt möchte ich mit dieser Zusammenfassung ein paar nützliche hinzufügen jQuery Plugins, die die Notwendigkeit beheben, Elemente an einem bestimmten Ort auf einer Seite zu fixieren. Sie bieten verschiedene Funktionen, die Ihren verschiedenen Bedürfnissen entsprechen, also sollten Sie sie alle erkunden, um die richtige Passform zu finden.
Das Tolle ist, dass sie alle jQuery-Plugins sind und sie super einfach zu implementieren sind. Wenn Sie diesen Stil produzieren möchten, machen Sie es zumindest zu einem einfachen Job.
Erdmännchen
Erdmännchen ist eines meiner Lieblingswerkzeuge für diesen speziellen Job. Seine Fähigkeit, verborgen zu sein, macht es zu einem großartigen Werkzeug, um Werbeinhalte oder wichtige Funktionen wie E-Mail-Anmeldeformulare anzuzeigen.
Stickyscroll
Stickyscroll ist ein Plugin, mit dem Sie Elemente erstellen können, die mit der Seite blättern, bis sie oben angekommen sind, und dann bleiben sie an ihrem Platz. Dieses Plugin hilft auch dabei sicherzustellen, dass Elemente nicht in eine Fußzeilenregion verschoben werden, indem eine untere Grenze angegeben wird. ein nettes Extra-Feature für sicher.
Wegpunkte
Wegpunkte Mit dieser Option können Sie jQuery-Ereignisse auslösen, wenn ein Benutzer zu bestimmten Punkten auf einer Seite scrollt. Dies ist praktisch, wenn Sie die Navigation hervorheben oder ändern möchten, um sie dem Standort des Benutzers auf der Seite anzupassen. Aber der Spaß endet nicht dort, da es unzählige Dinge gibt, die Sie zu einer Seite oder einem Design tun können, während ein Benutzer scrollt und mit ihm interagiert.
Fazit
Feste Elemente sind jetzt ein gemeinsames Element, mit dem Designer arbeiten können. Tools zum Ausführen solcher Funktionen und vollständige Browserunterstützung sind kein Problem mehr.
Als solche ist es eine großartige Technik, um in Ihrem Werkzeug Gürtel zu halten und zu ziehen, wenn die Zeit reif ist. Solche Herangehensweisen sind natürlich nicht die Art von Dingen, die Sie jeden Tag verwenden, aber sie können unglaublich effektiv sein, wenn Sie effektiv eingesetzt werden.