CSS Sticky: Learn How to Create Sticky Elements with CSS

CSS sticky – это свойство, которое позволяет элементу оставаться на месте, когда пользователь прокручивает страницу, и при этом сохраняет позиционирование.

Чтобы сделать элемент «липким», нужно применить к нему свойства position и top, bottom, left или right.

Пример:

html

   
Заголовок страницы


   
Основное содержание страницы

CSS-стили:

css
.header {
   position: sticky;
   top: 0;
   background-color: #fff;
   padding: 20px;
   box-shadow: 0px 2px 15px rgba(0,0,0,.1);
}
.content {
   padding: 20px;
}

В этом примере элемент с классом header останется на верхней части страницы, когда пользователь прокручивает вниз. Стили top и bottom задают расстояние между верхней/нижней границей элемента и границей его ближайшего родительского блока, который имеет позиционирование отличное от static.

Еще один пример:

html

  

    
Боковое меню
    

      
Ссылка 1
      
Ссылка 2
      
Ссылка 3
    
  
  

    
Основное содержание
    
...
  

CSS-стили:

css
.container {
  display: flex;
  justify-content: space-between;
}
.sidebar {
  width: 200px;
  position: sticky;
  top: 0;
}
.main {
  width: calc(100% - 200px);
}

В этом примере боковое меню с классом sidebar останется на месте, когда пользователь прокручивает страницу, пока не закончится прокрутка содержимого внутри родительского блока с классом container.

С помощью CSS sticky можно создать более интерактивный и легко управляемый пользовательский интерфейс. Например, липкий вертикальный меню, липкую кнопку внизу экрана, липкую шапку.