Geschrieben von Ibadehin Mojeed✏️
Sie arbeiten tagelang, vielleicht sogar monatelang, um eine elegante Webseite zu erstellen. Zuerst sieht alles gut aus, aber dann fangen Sie an zu scrollen … und plötzlich bleiben Ihre Sticky-Elemente – Navigationsmenüs, Kopfzeilen oder die Handlungsaufforderungen in der Seitenleiste – entweder überhaupt nicht hängen oder bleiben nicht dort, wo sie sein sollen.
Frustrierend, oder?
Was auf den ersten Blick wie ein kleiner Fehler erscheint, kann schnell zu echten Kopfschmerzen werden und, wenn er nicht behoben wird, das Engagement Ihrer Website erheblich beeinträchtigen.
In diesem Leitfaden gehen wir auf die häufigsten Probleme bei der klebrigen Positionierung ein:
Dann zeigen wir Ihnen anhand praktischer Beispiele und Tipps, wie Sie diese Probleme mit der Klebepositionierung beheben können, um Sie zu einem Profi bei der Klebepositionierung zu machen! Sie können auch einen Überblick über die Positionseigenschaft und die CSS-Sticky-Position finden, nachdem wir die häufigsten Probleme durchgegangen sind.
Der erste und einfachste Schritt zur Fehlerbehebung besteht darin, sicherzustellen, dass ein Versatz mithilfe von Eigenschaften wie oben, rechts, unten oder links angegeben wird:
.sticky-heading {
position: sticky;
top: 0; /* Offset not defined - sticky behavior won't activate */
}
Ohne einen Offset wird das Sticky-Verhalten nicht aktiviert. Stellen Sie außerdem sicher, dass der angewendete Versatz für die beabsichtigte Scrollrichtung geeignet ist. Zum Beispiel oben oder unten für vertikales Scrollen und links oder rechts für horizontales Scrollen.
Der CodePen unten zeigt klebrige Elemente in Gittercontainern:
Sehen Sie sich das Pen Sticky-Element in Gitterbehältern von Ibaslogic (@ibaslogic) auf CodePen an.
Im CodePen bleiben die Überschriften hängen, da der Container, in dem sich die einzelnen Überschriften befinden, über genügend scrollbaren Platz verfügt. Um das Layout besser zu visualisieren, versuchen Sie, Rahmen um den Inhalt herum hinzuzufügen. Dadurch können Sie sehen, wie die einzelnen Überschriften an ihrem Platz bleiben, während Sie durch die Abschnitte scrollen.
Im HTML-Code werden die Überschriften in Rastercontainern platziert und Rasterelemente werden auf natürliche Weise gestreckt, um den verfügbaren Platz auszufüllen. Diese Dehnung kann jedoch dazu führen, dass ein Sticky-Element nicht genügend Platz zum Scrollen und Kleben hat.
Um dieses Problem zu beheben, haben wir align-items: start auf den Rastercontainer angewendet. Dadurch wird verhindert, dass das Klebeelement gedehnt wird, und es wird sichergestellt, dass es genügend Platz hat, um wie vorgesehen zu funktionieren:
.sticky-heading {
position: sticky;
top: 0; /* Offset not defined - sticky behavior won't activate */
}
Ohne align-items:start würde der Rastercontainer die Überschrift strecken, um den verfügbaren Platz auszufüllen, wodurch verhindert wird, dass das Element oben im Ansichtsfenster hängen bleibt. Dies liegt daran, dass nicht genügend scrollbarer Platz vorhanden wäre, damit das Element ordnungsgemäß angehängt werden kann, wie unten gezeigt:
Während das Beispiel die Implementierung für das Raster zeigt, gilt die gleiche Lösung auch für Flexbox-Layouts.
Wenn Sie unten mit dem CodePen interagieren und durch das Ansichtsfenster scrollen, um das Sticky-Verhalten zu beobachten, werden Sie feststellen, dass das erste Sticky-Element nicht wie erwartet funktioniert, während das zweite korrekt funktioniert – obwohl die Layouts optisch ähnlich erscheinen :
Wie bereits erwähnt, muss der Container ausreichend hoch oder scrollbar sein, damit das Sticky-Element ordnungsgemäß funktioniert. Schauen wir uns die Container genauer an. Im ersten Layout ist das Sticky-Element in ein zusätzliches
article {
align-items: start;
/* ... */
}
Im CodePen unten können Sie durch den Abschnitt scrollen, um zu beobachten, wie die klebrigen Überschriften jetzt im Abschnitt selbst hängen bleiben. Zur Visualisierung des scrollbaren Bereichs wurde ein Rahmen hinzugefügt:
Das Festlegen eines Überlaufs für das Körperelement führt normalerweise nicht zu einer Unterbrechung der Sticky-Positionierung, wie dies bei anderen Vorgängerelementen der Fall sein könnte:
<body>
<p>Das liegt daran, dass der Textkörper den primären Scrollkontext für die gesamte Seite erstellt und Sticky-Elemente in diesem Fall immer noch relativ zum Ansichtsfenster haften bleiben:</p>
<p><iframe height="600" src="https://codepen.io/ibaslogic/embed/wvVzBJx?height=600&default-tab=result&embed-version=2" scrolling="no" frameborder="no" allowtransparency="true" loading="lazy">
</iframe>
</p>
<p>Obwohl ein Bildlaufmechanismus erstellt wurde, beeinträchtigt dieser das Sticky-Verhalten nicht, wie es bei kleineren Containern der Fall wäre – außer bei der Einstellung „overflow: versteckt“, wodurch die Möglichkeit zum Scrollen von Inhalten, die über das Ansichtsfenster hinauslaufen, entfernt wird. </p>
<p>Da wir nun die häufigsten Sticky-Probleme behandelt haben, können Sie einen allgemeineren Überblick über die Positionseigenschaft und die Sticky-Position lesen.</p><h2>
Ein kurzer Überblick über die Positionseigenschaft
</h2>
<p>Die CSS-Positionseigenschaft steuert, wie Elemente auf einer Webseite positioniert werden. Mit Werten wie „relativ“, „absolut“, „fest“ oder „Sticky“ können Sie die Platzierung eines Elements mithilfe der Eigenschaften „oben“, „rechts“, „unten“ und „links“ innerhalb seines enthaltenden Blocks oder des Ansichtsfensters anpassen. Diese Werte ermöglichen auch die Positionierung von Elementen zueinander mithilfe des Z-Index. </p>
<p>Beachten Sie jedoch, dass diese Offset-Eigenschaften (d. h. oben, rechts, unten, links) und der Z-Index nicht für Elemente mit der standardmäßigen statischen Positionierung gelten. </p>
<p>Wenn es um die Fehlerbehebung bei der Sticky-Positionierung geht, ist es hilfreich, noch einmal darüber nachzudenken, was der Sticky-Wert mit sich bringt. Wenn Sie sein Verhalten verstehen, erhalten Sie ein klareres Bild häufiger Probleme und wissen, wie Sie diese effektiv angehen können.</p>
<h2>
Die CSS-Sticky-Position
</h2>
<p>Wenn Sie position: sticky auf ein Element anwenden, verhält es sich ähnlich wie ein relativ positioniertes Element, indem es seine Position im Dokumentfluss beibehält. Es erhält jedoch auch die Fähigkeit, „klebrig“ zu werden und auf Scrollen zu reagieren. </p>
<p>Wenn Sie einen Versatz definieren, z. B. „top: 10px“, bleibt das Element beim Scrollen nach unten an dieser Position und verhält sich so, als würde es „position: Fixed“ verwenden. Beim horizontalen Scrollen können Sie Offsets wie links oder rechts verwenden, um einen ähnlichen Effekt zu erzielen. Es ist wichtig zu beachten, dass das Sticky-Verhalten nur innerhalb des enthaltenden Blocks des Elements gilt. Sobald Sie über die Grenzen dieses Blocks hinaus scrollen, scrollt das Sticky-Element wie jedes normale Element weg. </p>
<p>Der CodePen unten demonstriert das Sticky-Verhalten. Scrollen Sie durch das Ansichtsfenster, um die Sticky-Überschriften in Aktion zu sehen:</p>
<p><iframe height="600" src="https://codepen.io/ibaslogic/embed/wvVKrrq?height=600&default-tab=result&embed-version=2" scrolling="no" frameborder="no" allowtransparency="true" loading="lazy">
</iframe>
</p>
<p>Jede HTML-Überschrift wird mit „position: sticky“ und „top: 0“ gestaltet, um sicherzustellen, dass sie beim Scrollen durch den Inhalt oben im Ansichtsfenster bleibt. Die Sticky-Überschriften bleiben jedoch auf die jeweiligen Abschnitte beschränkt. Sobald der Inhalt eines Abschnitts vollständig durchgescrollt wurde, wird die Überschrift nach oben verschoben, sodass die nächste Überschrift an der richtigen Stelle bleibt. Dies zeigt, dass Sticky-Elemente ihrem übergeordneten Container nicht entkommen.</p>
<h2>
Abschluss
</h2>
<p>Das Erstellen einer Webseite kann frustrierend sein, wenn Sticky-Elemente nicht wie erwartet funktionieren. Wenn Sie jedoch wichtige Faktoren wie die Überlaufeigenschaften des Vorfahren und die Höhe des übergeordneten Containers verstehen, können Sie Probleme mit der Positionierung bei Sticky-Positionen beheben. </p>
<p>Mit den Beispielen und Tipps in diesem Leitfaden können Sie sicherstellen, dass Sticky-Navigation, Header und Calls-to-Action in der Seitenleiste reibungslos funktionieren. Wenn Sie diesen Leitfaden hilfreich fanden, können Sie ihn gerne online teilen. Und wenn Sie Fragen oder Beiträge haben, folgen Sie mir im Kommentarbereich!</p><hr>
<h2>
Belastet Ihr Frontend die CPU Ihrer Benutzer?
</h2>
<p>Da Web-Frontends immer komplexer werden, fordern ressourcenintensive Funktionen immer mehr vom Browser. Wenn Sie daran interessiert sind, die clientseitige CPU-Nutzung, Speichernutzung und mehr für alle Ihre Benutzer in der Produktion zu überwachen und zu verfolgen, probieren Sie LogRocket aus.</p>
<p><img src="https://img.php.cn/upload/article/000/000/000/173266096142897.jpg" alt="Getting sticky with it — Troubleshooting CSS sticky positioning"></p>
<p>LogRocket ist wie ein DVR für Web- und mobile Apps und zeichnet alles auf, was in Ihrer Web-App, mobilen App oder Website passiert. Anstatt zu erraten, warum Probleme auftreten, können Sie wichtige Frontend-Leistungsmetriken zusammenfassen und darüber berichten, Benutzersitzungen zusammen mit dem Anwendungsstatus wiedergeben, Netzwerkanfragen protokollieren und alle Fehler automatisch aufdecken.</p>
<p>Modernisieren Sie die Art und Weise, wie Sie Web- und mobile Apps debuggen – beginnen Sie mit der kostenlosen Überwachung.</p>
Das obige ist der detaillierte Inhalt vonBleiben Sie dabei hängen – Fehlerbehebung bei der CSS-Sticky-Positionierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
