Schwimmender (klebriger) Header im Shopify-Theme

Ein schwebender (klebriger) Header erleichtert die Navigation auf der Website. Aus technischer Sicht wird diese Technik am häufigsten mit JavaScript-Code umgesetzt. Aber auch ein klebriger Header kann mit einfachen CSS-Regeln erstellt werden, die wir in diesem Artikel betrachten werden.

Der grundlegende CSS-Befehl, den Sie benötigen, um einen schwebenden Header in Ihrem Shopify-Shop zu erstellen, sieht so aus:

position: sticky;

Die Einfachheit dieser Lösung hat negative Eigenschaften:

• Es kann keine Animation angewendet werden, wenn der Header von einem festen Zustand in einen schwebenden übergeht.
• Es kann nicht ausgewählt werden, welche spezifischen Blöcke des Headers schwebend sein sollen und welche fest bleiben sollen. Wenn beispielsweise in dem Header Ihres Themas eine Textanzeige oder die Navigation der Website vorhanden ist, werden all diese Blöcke im Gesamtheader ebenfalls schwebend sein.
• Die Unterstützung des Eigenschaften sticky durch Browser ist nicht absolut. In den meisten Fällen unterstützen ältere Versionen von Browsern diese Eigenschaft nicht. Das bedeutet, dass in solchen Browsern Ihr Header fest bleibt, als ob Sie die Eigenschaft "sticky" nicht angewendet hätten. Derzeit wird die Eigenschaft bei 95% der Benutzer von Browsern funktionieren. Hier können Sie aktuelle Informationen zur Unterstützung der Eigenschaft "sticky" sehen.

Wenn Sie in Ihrem Shop eines der kostenlosen Shopify-Themen installiert haben und die Technik des schwebenden Headers dort nicht implementiert ist, müssen Sie lediglich den folgenden Code in den Abschnitt header.liquid Ihres Themas (am Anfang oder am Ende der Datei) hinzufügen:

<style>
#shopify-section-header {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 100;
background-color: white; /* Geben Sie die Hintergrundfarbe des Headers an, falls er transparent ist */
}
</style>

Wenn in Ihrem Shop jedoch ein benutzerdefiniertes oder kostenpflichtiges Thema installiert ist, sollten Sie sich an die Entwickler oder den Support Ihres Themas wenden. Oder hinterlassen Sie einfach einen Link zu Ihrem Shop in den Kommentaren, damit wir Ihnen helfen können, eine Lösung zu finden.