position: sticky

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

Элемент с position: sticky «прилипает» к экрану при прокрутке, пока не встретится с границей родительского блока.

Пример

Секция статьи "Пример"

Сделаем «липкий» заголовок, а также «липкий» блок в правом нижнем углу для каждого из <section>:

Открыть демо в новой вкладке

Как это понять

Секция статьи "Как это понять"

Блоки с «липким» позиционированием ведут себя как position: relative и position: fixed одновременно. Пока блок не достиг указанного расстояния от края окна браузера, он ведёт себя как относительно спозиционированный. Когда блок достигнет этой точки, то станет вести себя, как будто мы указали position: fixed. А когда он встретится с противоположным краем родителя, то снова будет вести себя, как position: relative.

Как пишется

Секция статьи "Как пишется"
        
          
          .block {  position: sticky;  top: 15px;}
          .block {
  position: sticky;
  top: 15px;
}

        
        
          
        
      

Для блока, который должен быть «липко» позиционирован, указываем position: sticky и позицию относительно окна браузера. В этом примере блок «прилипнет» на расстоянии 15 пикселей от верхнего края окна.

Подсказки

Секция статьи "Подсказки"

💡 Если нужный элемент занимает всю высоту родительского блока (если он один в блоке или просто самый высокий среди соседних элементов), то position: sticky не сработает.

💡 При вертикальном скролле работают только свойства top и bottom, при горизонтальном — left и right.

💡 position: sticky можно указать внутри родителя с overflow: scroll или overflow: auto.

💡 Если элементу указать большее число пикселей, чем позволяет родитель, то элемент сразу встанет к противоположному краю родительского блока, но за пределы блока не выйдет.

На практике

Секция статьи "На практике"

Лена Райан советует

Секция статьи "Лена Райан советует"

🛠 С помощью такого позиционирования удобно делать закреплённую шапку — если она является непосредственным наследником body, то, указав шапке position: sticky, мы получим статичную шапку при загрузке экрана, а при скролле страницы — зафиксированную сверху.