Lekcje
Rozpocznij
Rozpocznij naukę
CodeGym /Kursy /Frontend SELF PL /Lepkie pozycjonowanie

Lepkie pozycjonowanie

Frontend SELF PL
Poziom 22 , Lekcja 0
Dostępny

6.1 position: sticky

Lepkie pozycjonowanie (position: sticky) w CSS łączy w sobie właściwości pozycjonowania relatywnego i stałego. Elementy z lepkim pozycjonowaniem zachowują się jak relatywnie ustawione, dopóki nie osiągną określonego progu przewijania, po czym stają się stałe.

Funkcje lepkiego pozycjonowania:

  • Element z position: sticky zachowuje się jak relatywnie pozycjonowany, dopóki nie osiągnie określonej pozycji przewijania
  • Po osiągnięciu zadanego progu element staje się stały i pozostaje na miejscu, dopóki nie zostanie przekroczony kolejny próg przewijania
  • Lepkie pozycjonowanie działa tylko w obrębie kontenera nadrzędnego. Gdy kontener nadrzędny wyjdzie poza granice obszaru widoku, lepkie elementy tracą swoje stałe właściwości

Składnia lepkiego pozycjonowania

Aby zastosować lepkie pozycjonowanie, używamy właściwości position: sticky i współrzędnych top, right, bottom lub left do określania progu przewijania. 

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

Gdzie:

  • top: odległość od górnej krawędzi okna przeglądarki do górnej krawędzi elementu
  • right: odległość od prawej krawędzi okna przeglądarki do prawej krawędzi elementu
  • bottom: odległość od dolnej krawędzi okna przeglądarki do dolnej krawędzi elementu
  • left: odległość od lewej krawędzi okna przeglądarki do lewej krawędzi elementu

Przykład:

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>
Kotlin

W tym przykładzie nagłówek z klasą .header pozostanie na miejscu podczas przewijania strony, dopóki jego górna krawędź nie osiągnie górnej krawędzi okna widoku.

6.2 Plusy i minusy lepkiego pozycjonowania

Plusy lepkiego pozycjonowania

  1. Ulepszenie interfejsu użytkownika:
    • Lepkie elementy, takie jak nagłówki, panele nawigacyjne i paski boczne, poprawiają nawigację i dostępność treści na długich stronach, pozostając widocznymi dla użytkownika
  2. Łączenie zalet pozycjonowania relatywnego i stałego:
    • Lepkie pozycjonowanie pozwala elementom pozostać w przepływie dokumentu, zachowując ich relatywne położenie, dopóki nie zostanie osiągnięty próg przewijania. To zapewnia bardziej naturalne zachowanie elementów
  3. Łatwość implementacji:
    • Lepkie pozycjonowanie jest łatwe do wdrożenia z minimalną ilością kodu i bez potrzeby użycia JavaScript

Minusy lepkiego pozycjonowania

  1. Ograniczone wsparcie w starszych przeglądarkach:
    • Lepkie pozycjonowanie jest wspierane przez większość nowoczesnych przeglądarek, ale może nie działać w starszych wersjach przeglądarek, co może wymagać dodatkowych rozwiązań dla kompatybilności
  2. Zależność od kontenerów nadrzędnych:
    • Lepkie pozycjonowanie działa tylko w obrębie kontenera nadrzędnego. Jeśli kontener nadrzędny wyjdzie poza granice obszaru widoku, lepkie elementy tracą swoje stałe właściwości
  3. Problemy z nakładaniem się treści:
    • Lepkie elementy mogą nakładać się na inne elementy na stronie, jeśli ich wysokość lub szerokość nie są brane pod uwagę podczas projektowania layoutu

6.3 Przykłady użycia lepkiego pozycjonowania

1. Lepki pasek boczny

Tworzenie lepkiego paska bocznego, który pozostaje widoczny podczas przewijania treści.

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>

W tym przykładzie pasek boczny z klasą .sidebar pozostaje na miejscu podczas przewijania treści.

2. Lepki nagłówek tabeli

Tworzenie lepkiego nagłówka tabeli, który pozostaje widoczny podczas przewijania dużej ilości danych.

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>

W tym przykładzie nagłówek tabeli pozostanie na miejscu podczas przewijania zawartości tabeli.

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