Методичка: Позиціонування елементів у HTML/CSS

Sticky позиціонування

Sticky - гібрид relative та fixed. Елемент поводиться як relative, доки не досягне певної позиції при прокрутці, потім стає fixed.

Приклад Sticky позиціонування:

Елемент 1

Sticky (прилипає при top: 10px)

Елемент 3

Елемент 4

Елемент 5

                
                    .sticky-menu {

                      position: sticky;

                      top: 0;

                      background: white;

                      z-index: 100;

                      padding: 1rem;

                      border-bottom: 2px solid #eee;

                    }

Переваги sticky:

Покращує UX при довгих сторінках
Не вилучає елемент з потоку (як fixed)
Працює лише всередині батьківського контейнера
Сучасна альтернатива fixed для багатьох випадків

Обмеження:

Sticky не працює, якщо батьківський елемент має overflow: hidden, scroll, або auto. Також потрібна підтримка браузера (не працює в IE).