So erstellen Sie ein Sticky-Element in HTML

So Erstellen Sie Ein Sticky Element In Html



Um das Gesamterscheinungsbild einer Webseite zu verbessern, sollten die hinzugefügten Elemente entsprechend positioniert werden. Insbesondere das CSS „ Position ”-Eigenschaft legt die Positionierung eines Elements in einem Dokument fest. Die Position wird durch die Eigenschaften right, left, top und bottom festgelegt. Die Standardposition der Elemente ist jedoch statisch, an der sich die Elemente beim normalen Fluss der Seite befinden.

In diesem Blog werden die CSS-Positionseigenschaft und die Methode zum Erstellen eines Sticky-Elements in HTML erläutert.

Was ist die CSS-Positionseigenschaft?

Die CSS-Positionseigenschaft gibt die Positionierungsmethode von HTML-Elementen an, die absolut, fest, statistisch, fest, vererbt, relativ oder initial sein kann.







Syntax



Position : klebrig | absolut | statisch | Fest | relativ | du erbst | Initial

Die oben angegebene Syntax zeigt, dass die Positionseigenschaft unterschiedliche Werte hat. Sie können entsprechend zugeordnet werden.



Schauen wir uns nun das Verfahren zum Erstellen von Sticky-Elementen in HTML an.





Was ist CSS position: sticky?

Das HTML-Element mit einem „ klebrig ”-Position hat eine relative Position, bis sie einen Punkt erreicht, und verhält sich dann wie ein klebriges Element.

Lassen Sie uns das einfache Beispiel durchgehen, um das Konzept der CSS-Sticky-Position zu verstehen.



Beispiel: Wie erstelle ich ein Sticky-Element in HTML?
Fügen Sie in der HTML-Datei

für die Überschrift,

für den Absatz und

mit dem Klassennamen „ klebrig “. Fügen Sie dann ein

-Tag mit einer verschachtelten geordneten Liste

    mit einer Liste
  1. hinzu.

    Notiz : Wir haben eine lange Liste erstellt, damit Sie beim Scrollen unserer Seite das Verhalten des Sticky-Elements beobachten können.

    HTML

    < h2 > Sticky Notes: Sehen Sie sich den Effekt des Sticky-Elements an < / h2 >
    < p > Position: klebrig < / p >
    < div Klasse = 'klebrig' > Das ist meine To-Do-Liste! < / div >
    < p >
    < ol >
    < das > Den Manager rufen < / das >
    < das > Treffen mit Mitarbeitern < / das >
    < das > Bericht einreichen < / das >
    < das > Geh zum Arzt < / das >
    < das > Einen Flug buchen < / das >
    < das > Spazieren gehen. < / das >
    < das > Gehen Sie einkaufen. < / das >
    < das > Schaue fern < / das >
    < das > Etwas Text. < / das >
    < das > Etwas Text. < / das >
    < das > Etwas Text. < / das >
    < das > Etwas Text. < / das >
    < das > Etwas Text. < / das >
    < das > Etwas Text. < / das >
    < das > Etwas Text. < / das >
    < das > Etwas Text. < / das >
    < das > Etwas Text. < / das >
    < das > Etwas Text. < / das >
    < das > Etwas Text. < / das >
    < das > Etwas Text. < / das >
    < das > Etwas Text. < / das >
    < das > Etwas Text. < / das >
    < das > Etwas Text. < / das >
    < das > Etwas Text. < / das >
    < das > Etwas Text. < / das >
    < das > Etwas Text. < / das >
    < das > Etwas Text. < / das >
    < das > Etwas Text. < / das >
    < das > Etwas Text. < / das >
    < das > Etwas Text. < / das >
    < / ol >
    < / p >

    Als nächstes werden wir dem div namens sticky Stil verleihen:

    • Hier, ' .klebrig ” stellt die Klasse dar, in der die Stileigenschaften angewendet werden müssen.
    • Innerhalb der geschweiften Klammern weisen wir das „ Position „Immobilienwert als“ klebrig “.
    • Das ' oben “ ist eingestellt als „ 0 “.
    • Das ' Hintergrundfarbe ' ist ' #00154f “.
    • Gib etwas „ Polsterung “ in das div, indem Sie seinen Wert als „ 40px “.
    • Schriftgröße ' wie ' 30px “.
    • Farbe ” von Schriftarten ist festgelegt als ” Weiß “.

    CSS

    .klebrig {
    Position : klebrig ;
    oben : 0 ;
    Hintergrundfarbe : #00154f ;
    Polsterung : 40px ;
    Schriftgröße : 30px ;
    Farbe : Weiß ;
    }

    Speichern Sie die HTML-Datei und öffnen Sie sie im Browser, um die Ausgabe anzuzeigen:

    Bonus-Tipp

    Durch die Nutzung des „ hsla() ”-Methode können Sie wie folgt einen transparenten Hintergrund für das hinzugefügte Sticky-Element festlegen:

    Hintergrund - Farbe : hsla ( 0 , 100 %, 90 %, 0,8 ) ;

    Ausgabe

    So bleibt das Element an der bestimmten Position hängen, indem das CSS „ Position „Immobilienwert als“ klebrig “.

    Fazit

    Das ' klebrig ” Position in CSS bewirkt, dass die Elementposition zwischen relativ und fest umschaltet. Als Ergebnis wird das hinzugefügte Sticky-Element relativ zur Schriftrolle positioniert, bis es einen bestimmten Punkt erreicht, an dem es sich wie ein Sticky verhält. Sie können auch den Transparenzgrad des hinzugefügten Sticky-Elements anpassen, indem Sie die Methode hsla() verwenden. Dieser Blog führte Sie zum Erstellen einfacher und klebriger transparenter Elemente.