Um klebrige Header oder Fu?zeile implementieren zu k?nnen, ist die Taste, die Position zu verwenden: klebrig korrekt. Bei der Implementierung des Sticky -Headers müssen Sie die Position festlegen: Sticky und Oben: 0, und stellen Sie sicher, dass der übergeordnete Container keinen überlauf einstellt: versteckt. Es wird empfohlen, Z-Index hinzuzufügen, um das überschreiben zu verhindern. 1. Der klebrige Header l?st sich nicht vom Dokumentfluss ab und wird beim Scrollen nach oben festgelegt und wirkt sich nicht auf das Layout anderer Inhalte aus. 2. Um klebrige Fu?zeile zu implementieren, müssen Sie den Hauptinhalt einwickeln und die Position der Fu?zeile festlegen: Klebrig und unten: 0, aber es wird nur wirksam, wenn der Inhalt weniger als ein Bildschirm betr?gt. 3. Bei Verwendung von Sticky müssen Sie beachten, dass das übergeordnete Element keinen überlauf haben kann: Hidden/Scroll/Auto, Oben oder unten müssen angegeben werden, und die Verwendung von Transformation/Filter/Will-Change- und anderen Attributen, und die H?he des Klebelements kann den enthaltenen Block nicht überschreiten. Sticky ist eine praktische, aber restriktive Eigenschaft und gilt für die feste Positionierung, die vom Bildlaufkontext abh?ngt.

Es ist eigentlich nicht schwierig, klebrige Header oder Fu?zeile zu machen, der Schlüssel ist, position: sticky . Es steigt nicht wie fest aus dem Dokumentstrom, sondern ist zwischen relativ und fest und kann gem?? der Bildlaufposition auf dem Bildschirm "gestangen" werden. Um es jedoch richtig zu verwenden, gibt es mehrere Details, auf die geachtet werden muss.

Grundlegendes Schreiben von Haftheader

M?chten Sie den Header oben reparieren lassen? Setzen Sie einfach position: sticky für den Header und fügen Sie top: 0 . Auf diese Weise wei? der Browser: Wenn das Element nach oben scrollt, beheben Sie es.

 Header {
  Position: klebrig;
  Top: 0;
  Z-Index: 1000;
}

Ein paar Punkte zu beachten:

• Der übergeordnete Container kann nicht überlaufen werden: versteckt , ansonsten wird klebrig nicht wirksam.
• Es ist am besten, einen z-index hinzuzufügen, um zu verhindern, dass er von anderen Inhalten abgedeckt wird.
• Es nimmt keinen Raum ein und verschwindet, was sich von fest unterscheidet.

Zum Beispiel haben Sie eine Navigationsleiste mit einem Bannerbild. Der Sticky Header überschreibt das Banner natürlich nach dem Scrollen, aber andere Inhalte der Seite scrollen weiter.

So implementieren Sie klebrige Fu?zeile

Die Fu?zeile ist ein wenig mühsam, sich unten zu kleben, da wir die meiste Zeit, dass sie standardm??ig am Ende des Inhalts angezeigt wird, und nur am unteren Rand des Bildschirms festhalten, wenn der Inhalt nicht hoch genug ist. Dies erfordert eine kleine strukturelle Koordination.

Eine übliche Praxis besteht darin, einen Wrapper -Beh?lter zu verwenden, um den Hauptinhalt zu wickeln und die Fu?zeile auf Sticky zu setzen:

 <div class = "Wrapper">
  <Ain> Seiteninhalt </main>
  <footer class = "Sticky-Footer"> Dies ist die untere </footer>
</div>

CSS:

 .Sticky-Footer {
  Position: klebrig;
  unten: 0;
  Hintergrund: wei?;
}

Diese Methode eignet sich jedoch nur für Situationen, in denen die Inhaltsh?he weniger als ein Bildschirm betr?gt. Wenn der Inhalt sehr lang ist, scrollen die Fu?zeile immer noch normal. Wenn Sie m?chten, dass die Fu?zeile immer am unteren Rand des Ansichtsfensters liegt (?hnlich wie fest), müssen Sie position: fixed .

H?ufig gestellte Fragen und Notizen

Bei der Verwendung von Sticky sind einige Gruben leicht zu treten. Hier sind ein paar gemeinsame:

• Das übergeordnete Element hat overflow: hidden/scroll/auto → klebrig ungültig
• Es gibt kein top oder bottom angegebener → Der Browser wei? nicht, an dem Sie sich festhalten m?chten
• Verwendung von transform , filter , will-change und anderen Eigenschaften → klebrig kann ungültig sein
• Die H?he des klebrigen Elements darf die H?he seines Blocks nicht überschreiten → Andernfalls kann es nicht kleben

Denken Sie also daran, diese Orte nach dem Schreiben zu überprüfen. Manchmal schrieb ich eindeutig Sticky, antwortete aber nicht, die meisten Gründe.

Grunds?tzlich ist das. Sticky ist eine sehr praktische Eigenschaft. Denken Sie nur daran, dass sie sich auf den Scroll -Kontext stützt und nicht alle F?lle gelten. Wenn Sie diese Punkte gut beherrschen, ist es nicht schwierig, klebrige Header oder Fu?zeile zu machen.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine klebrige Header oder Fu?zeile mit CSS -Position klebrig. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!