Лекції
Почати
Почати навчання
JavaRush /Курси /Frontend SELF UA /Липке позиціонування

Липке позиціонування

Frontend SELF UA
Рівень 22 , Лекція 0
Відкрита

6.1 position: sticky

Липке позиціонування (position: sticky) в CSS поєднує властивості відносного і фіксованого позиціонування. Елементи з клейким позиціонуванням поводяться як відносно позиціоновані, доки не досягають заданого порогу прокрутки, після чого вони стають фіксованими.

Особливості клейкого позиціонування:

  • Елемент з position: sticky поводиться як відносно позиціонований, доки не досягає певної позиції прокрутки
  • Після досягнення заданого порогу елемент стає фіксованим і залишається на місці, доки не буде перевищено інший поріг прокрутки
  • Липке позиціонування працює лише в межах батьківського контейнера. Коли батьківський контейнер виходить за межі області перегляду, клейкий елемент втрачає свої фіксовані властивості

Синтаксис клейкого позиціонування

Для застосування клейкого позиціонування використовуються властивості position: sticky і координати top, right, bottom або left для визначення порогу прокрутки. 

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

Де:

  • top: відстань від верхнього краю вікна браузера до верхнього краю елемента
  • right: відстань від правого краю вікна браузера до правого краю елемента
  • bottom: відстань від нижнього краю вікна браузера до нижнього краю елемента
  • left: відстань від лівого краю вікна браузера до лівого краю елемента

Приклад:

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. 
        </div>
      </div>
ALL IN ONE

У цьому прикладі заголовок з класом .header залишається на місці при прокрутці сторінки, доки його верхній край не досягне верхнього краю вікна перегляду.

6.2 Плюси та мінуси липкого позиціонування

Переваги липкого позиціонування

  1. Покращення користувацького інтерфейсу:
    • Липкі елементи, такі як заголовки, навігаційні панелі та бічні панелі, покращують навігацію та доступність контенту на довгих сторінках, залишаючись видимими для користувача
  2. Поєднання переваг відносного та фіксованого позиціонування:
    • Липке позиціонування дозволяє елементам залишатися в потоці документа, зберігаючи їх відносне положення, поки не буде досягнуто порогу прокручування. Це забезпечує більш природну поведінку елементів
  3. Простота реалізації:
    • Липке позиціонування легко реалізувати з мінімальною кількістю коду і без необхідності використання JavaScript

Недоліки липкого позиціонування

  1. Обмежена підтримка в старих браузерах:
    • Липке позиціонування підтримується більшістю сучасних браузерів, але може не працювати у старих версіях браузерів, що може вимагати додаткових рішень для сумісності
  2. Залежність від батьківських контейнерів:
    • Липке позиціонування працює тільки в межах батьківського контейнера. Якщо батьківський контейнер виходить за межі області перегляду, липкий елемент втрачає свої фіксовані властивості
  3. Проблеми з перекриттям контенту:
    • Липкі елементи можуть перекривати інші елементи на сторінці, якщо їх висота чи ширина не враховані при проєктуванні макета

6.3 Приклади використання липкого позиціонування

1. Липка бокова панель

Створення липкої бокової панелі, яка залишається видимою при прокручуванні контенту.

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 ут 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 ут ante. Nulla volutpat finibus porta.
          </div>
        </div>
      </div>

У цьому прикладі бокова панель з класом .sidebar залишатиметься на місці при прокручуванні контенту.

2. Липкий заголовок таблиці

Створення липкого заголовку таблиці, який залишається видимим при прокручуванні великого обсягу даних.

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>Заголовок</th>
            </tr>
          </thead>
          <tbody>
            <tr><td>Дані 1</td><td>Дані 2</td><td>Дані 3</td></tr>
            <tr><td>Дані 1</td><td>Дані 2</td><td>Дані 3</td></tr>
            <tr><td>Дані 1</td><td>Дані 2</td><td>Дані 3</td></tr>
            <tr><td>Дані 1</td><td>Дані 2</td><td>Дані 3</td></tr>
            <tr><td>Дані 1</td><td>Дані 2</td><td>Дані 3</td></tr>
            <tr><td>Дані 1</td><td>Дані 2</td><td>Дані 3</td></tr>
            <tr><td>Дані 1</td><td>Дані 2</td><td>Дані 3</td></tr>
            <tr><td>Дані 1</td><td>Дані 2</td><td>Дані 3</td></tr>
            <tr><td>Дані 1</td><td>Дані 2</td><td>Дані 3</td></tr>
            <tr><td>Дані 1</td><td>Дані 2</td><td>Дані 3</td></tr>
            <tr><td>Дані 1</td><td>Дані 2</td><td>Дані 3</td></tr>
            <tr><td>Дані 1</td><td>Дані 2</td><td>Дані 3</td></tr>
          </tbody>
        </table>
      </div>

У цьому прикладі заголовок таблиці залишатиметься на місці при прокручуванні вмісту таблиці.

Коментарі
ЩОБ ПОДИВИТИСЯ ВСІ КОМЕНТАРІ АБО ЗАЛИШИТИ КОМЕНТАР,
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ