Lektionen
Start
Jetzt lernen
CodeGym /Java Kurs /Frontend SELF DE /Sticky Positioning

Sticky Positioning

Frontend SELF DE
Level 22 , Lektion 0
Verfügbar

6.1 position: sticky

Sticky Positioning (position: sticky) in CSS kombiniert die Eigenschaften von relativem und festem Positionieren. Elemente mit Sticky-Positionierung verhalten sich wie relativ positionierte, bis sie einen bestimmten Scroll-Schwellenwert erreichen, dann werden sie fest positioniert.

Besonderheiten des Sticky-Positioning:

  • Ein Element mit position: sticky verhält sich wie ein relativ positioniertes, bis es eine bestimmte Scroll-Position erreicht
  • Nach Erreichen des festgelegten Schwellenwerts wird das Element fixiert und bleibt an Ort und Stelle, bis ein anderer Scroll-Schwellenwert überschritten wird
  • Sticky-Positioning funktioniert nur innerhalb des übergeordneten Containers. Wenn der übergeordnete Container die Grenzen des Ansichtsfensters verlässt, verliert das Sticky-Element seine fixierten Eigenschaften

Syntax des Sticky-Positioning

Für die Anwendung des Sticky-Positioning werden die Eigenschaften position: sticky und die Koordinaten top, right, bottom oder left zur Bestimmung des Scroll-Schwellenwerts verwendet. 

    
      .element {
        position: sticky;
        top: value;
        right: value;
        bottom: value;
        left: value;
      }

Woher:

  • top: Abstand vom oberen Rand des Browserfensters bis zum oberen Rand des Elements
  • right: Abstand vom rechten Rand des Browserfensters bis zum rechten Rand des Elements
  • bottom: Abstand vom unteren Rand des Browserfensters bis zum unteren Rand des Elements
  • left: Abstand vom linken Rand des Browserfensters bis zum linken Rand des Elements

Beispiel:

CSS
    
      .wrapper {
        height: 200px;
        overflow: auto;
      }

      .header {
        position: sticky;
        top: 0;
        background-color: deepskyblue;
        padding: 10px;
        font-size: 24px;
        color: white;
      }

      .content {
        margin-top: 25px;
        background-color: lightgrey;
        padding: 20px;
      }
HTML
    
      <div class="wrapper">
        <div class="header">Sticky Header</div>
        <div class="content">
          Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
          Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
          Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
          Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
          Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
          Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
        </div>
      </div>
Java university

In diesem Beispiel bleibt die Kopfzeile mit der Klasse .header an Ort und Stelle, wenn die Seite gescrollt wird, bis ihr oberer Rand den oberen Rand des Ansichtsfensters erreicht.

6.2 Vorteile und Nachteile des Sticky-Positioning

Vorteile des Sticky-Positioning

  1. Verbesserung der Benutzeroberfläche:
    • Sticky-Elemente wie Kopfzeilen, Navigationsleisten und Seitenleisten verbessern die Navigation und Zugänglichkeit von Inhalten auf langen Seiten, indem sie für den Benutzer sichtbar bleiben
  2. Kombination von Vorteilen relativer und fixer Positionierung:
    • Sticky-Positioning ermöglicht es Elementen, im Dokumentfluss zu bleiben und ihre relative Position zu bewahren, bis der Scroll-Schwellenwert erreicht ist. Es sorgt für ein natürlicheres Verhalten der Elemente
  3. Einfache Implementierung:
    • Sticky-Positioning lässt sich einfach mit minimalem Code und ohne den Einsatz von JavaScript implementieren

Nachteile des Sticky-Positioning

  1. Eingeschränkte Unterstützung in älteren Browsern:
    • Sticky-Positioning wird von den meisten modernen Browsern unterstützt, funktioniert jedoch möglicherweise nicht in älteren Browserversionen, was zusätzlichen Aufwand für Kompatibilität erfordern kann
  2. Abhängigkeit von übergeordneten Containern:
    • Sticky-Positioning funktioniert nur innerhalb des übergeordneten Containers. Wenn der übergeordnete Container die Grenzen des Ansichtsfensters verlässt, verliert das Sticky-Element seine fixierten Eigenschaften
  3. Probleme mit der Überlappung von Inhalten:
    • Sticky-Elemente können andere Elemente auf der Seite überlappen, wenn ihre Höhe oder Breite bei der Gestaltung des Layouts nicht berücksichtigt wird

6.3 Beispiele für die Verwendung von Sticky-Positioning

1. Sticky-Seitenleiste

Erstellung einer Sticky-Seitenleiste, die beim Scrollen des Inhalts sichtbar bleibt.

CSS
    
      .wrapper {
        height: 200px;
        overflow: auto;
      }

      .container {
        display: flex;
      }

      .sidebar {
        position: sticky;
        top: 0;
        left: 0;
        width: 200px;
        height: 100px;
        background-color: lightgreen;
        padding: 10px;
      }

      .content {
        background-color: lightgrey;
        padding: 20px;
      }
HTML
    
      <div class="wrapper">
        <div class="container">
          <div class="sidebar">Sticky Sidebar</div>
          <div class="content">
            Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
            Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
            Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
            Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
            Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
            Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
          </div>
        </div>
      </div>

In diesem Beispiel bleibt die Seitenleiste mit der Klasse .sidebar an Ort und Stelle, wenn der Inhalt gescrollt wird.

2. Sticky Tabellen-Header

Erstellung eines Sticky-Tabellen-Headers, der beim Scrollen durch große Datenmengen sichtbar bleibt.

CSS
    
        .wrapper {
          height: 200px;
          overflow: auto;
        }

        table {
          width: 100%;
          border-collapse: collapse;
        }

        th, td {
          padding: 10px;
          border: 1px solid #ddd;
        }

        th {
          position: sticky;
          top: 0;
          background-color: deepskyblue;
          color: white;
        }

        tbody {
          min-height: 300px;
          display: block;
        }

        tbody tr {
          display: table;
          width: 100%;
          table-layout: fixed;
        }
HTML
    
      <div class="wrapper">
        <table>
          <thead>
            <tr>
              <th>Header</th>
            </tr>
          </thead>
          <tbody>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
            <tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr>
          </tbody>
        </table>
      </div>

In diesem Beispiel bleibt die Tabellen-Header an Ort und Stelle, wenn der Tabelleninhalt gescrollt wird.

Kommentare
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION