CSS position: fixed / position: sticky

Elemente mit einer fixen Position können die Benutzerfreundlichkeit deiner Website maßgeblich verbessern. Sie helfen deinen Website-Besuchern sich schneller zurecht zu finden und sind ein tolles Werkzeug um die Navigation einer Website effektiv zu gestalten.

Für gewöhnlich ist eine Navigationsleiste oder andere Website-Elemente, wie beispielsweise Social-Media-Buttons, statisch. Was bedeutet, dass diese beim Scrollen verschwinden. Anders ist das bei fixierten oder sticky Elementen. Diese bleiben stets für den Nutzer sichtbar und erlauben diesem schneller eine Website zu navigieren.

Wie du Elemente mit einer fixen Position auf deiner Website erstellst

position: fixed wird oftmals benutzt, um eine Navigationsleiste oder einen Footer beim Scrollen dauerhaft einzublenden.

Beachte, dass vor allem für mobile Geräte diese Option besser deaktiviert werden sollte. Auf den kleinen Bildschirmen können fixe Elemente andere wichtige Websiteinhalte wie Text verdeckt werden und störend wirken können.

Wie wendet man CSS position: fixed / position: sticky an?

Um Elemente auf deiner Website zu fixieren, gibt es verschiedene Möglichkeiten.

Fixierte Elemente mit WordPress:

Auf WordPress geht dies besonders einfach. Hier kann man fixierte Buttons einfach mit dem kostenlosen Plug-In „Advanced Floating Content“ erstellen. Dieses Plugin muss zunächst installiert werden. Danach benötigt man nur noch ein wenig CSS um die Optik des Elementes anzupassen.
Dieses Plug-In ist in der WordPress Bibliothek zu finden. Dort klickt man es einfach an und erstellt den Inhalt für den Button.

Mit Grundkenntnissen in CSS kann man dann noch die Position einstellen. Mit der Pro-Version lässt sich das Design auch ohne CSS anpassen. Solltest du keine Kenntnisse in CSS haben, ist die Pro-Version daher eine gute Option für dich.

Mit diesem CSS Code kannst du mit diesem Plugin einen orangenen Button erstellen:

Position: Fixed Bottom Right
Show Close Button: No
Width: 85 Pixels (Breite des Buttons. Ggf. Anpassen, wenn der Button nachher zu schmal oder zu breit sein sollte)
Background Color: #ff6600 (Orange)
Margin: 0 0 50px 0 (50 Pixel Abstand von unten)
Border: 0 0 0 0
Border Properties: Alles so lassen

Diese kannst du einfach unter Advanced Floating Content → Add New eingeben. Zusätzlich brauchst du noch diesen HTML Code:

<p><a style=“color:#fff; font-size: 14px; text-align: center;“ href=“Link zu deiner Kontaktseite„>KONTAKT</a></p>

Diesen gibst du oben in dem Texteditor ein. Vorher allerdings oben rechts in dem Editor bei Visuell und auf Text klicken. Ansonsten wird das HTML nicht erkannt. Das Attribut „font-size: 14px“ muss ggf. an die gewünschte Schriftgröße angepasst werden. Z.B. 16px oder 18px.

Mit reinem HTML/CSS fixierte Buttons erstellen (Ohne WordPress):

Wenn du kein WordPress nutzt, kann dies natürlich auch über HTML und CSS funktionieren. Am besten schaust du dir hierzu das zum Beitrag gehörende Video ab Minute 5:55 an. Dort erkläre ich dir, wie man Farben, Positionen und Verlinkungen anpassen kann.

Im Grunde genommen, musst du nur dem Element eine Klasse oder ID geben. Das geht, indem du in das Element im HTML Code z.B. class=“fixedbutton“ schreibst.

Dieser Klasse musst du jetzt im CSS Code die Eigenschaft position: fixed; zuweisen. Danach kannst du mit den CSS Eigenschaften: top, bottom, left & right die Position bestimmen.

Hier sind die Codes aus dem Video:

CSS:
.fixedbutton {
position: fixed;
bottom: 50px;
right: 0;
background: rgba(16, 78, 139, 0.8);
padding: 10px 15px 10px 15px;
color: #fff !important;
}

.fixedbutton:hover {
background: #1969b7;
}

HTML:
<a href=“https://basel-webdesign.com/kontakt/“ class=“fixedbutton“>KONTAKT</a>

Diese Funktion eignet sich gut, um bestimmte Elemente hervorzuheben. Wenn man hiermit nicht übertreibt, kann es helfen, die Conversion Rate zu erhöhen. Man sollte sich daher gut überlegen, was man hiermit macht!

Sticky Elemente mit CSS postion: sticky

Positon: sticky ist eine Erweiterung der position: fixed in Kombination mit position: relative. Mit dem CSS Befehl position: sticky lassen sich Elemente wie Seitenleisten oder Navigationsmenüs an jede beliebige Stelle so fixieren, dass sie beim Scrollen zuerst mitkommen und dann eine bestimmte Position beibehalten und dort ständig sichtbar bleiben. Fix positionierte Elemente haben keinen Einfluss auf andere Elemente.

Man sollte lediglich die individuelle Nützlichkeit des Users im Auge behalten, wenn man sticky Footer oder sticky header und Co. erstellt. Denke stets an die Usability und denke darüber nach, inwiefern ein fixer Facebook-Chat-Button oder eine sticky Navigation für den Website-User Nutzen bringt. Eine Website mit wenig Inhalten, wo Nutzer nur wenig scrollen müssen, braucht nicht unbedingt ein dauernd sichtbares Menü.

Achte auch darauf, dass fixierte Buttons, Menüs und andere Elemente so klein wie möglich gehalten werden sollten, da sie sonst andere wichtige Websiteinhalte verdecken können.

Wie immer hoffen wir, dass dir dieser Beitrag weitergeholfen hat. Für Fragen und Anregungen kannst du uns gerne einen Kommentar hinterlassen.

Um in Zukunft keinen Beitrag mehr zu verpassen, kannst du dich auch gerne zu unserem Newsletter anmelden.

Bis zum nächsten Mal.