Позиціонування елементів у HTML/CSS

Sticky — гібрид relative та fixed

Теорія: Що таке sticky? ↑

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

Основна ідея: елемент «прилипає» до заданої межі (top, bottom, left, right) під час прокрутки контейнера.

Приклад 1: Sticky Header ↑

Класичний випадок — закріплення шапки сайту при прокрутці. Шапка завжди залишається видимою зверху.

.sticky-header {
    position: sticky;
    top: 0;
    background: #2c3e50;
    color: #fff;
    padding: 10px 15px;
    z-index: 10;
}

Копіювати

Приклад 2: Sticky Menu ↑

Меню, яке «прилипає» на відстані 10px від верху при прокрутці.

.sticky-menu {
    position: sticky;
    top: 10px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 10px;
    z-index: 10;
}

Копіювати

Приклад 3: Sticky Card ↑

Картка, яка прилипає до верху з відстанню 20px — зручно для реклами або важливої інформації в бічній панелі.

.sticky-card {
    position: sticky;
    top: 20px;
    background: #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    padding: 15px;
    border-radius: 12px;
    border-left: 5px solid #3498db;
}

Копіювати

Приклад 4: Sticky Badge ↑

Маленький бейдж або мітка, яка залишається видимою при прокрутці.

.sticky-badge {
    position: sticky;
    top: 50px;
    background: #e74c3c;
    color: #fff;
    padding: 5px 12px;
    border-radius: 20px;
    display: inline-block;
}

Копіювати

Обмеження та підтримка ↑

Код усіх прикладів (HTML + CSS) ↑

<!-- Sticky Header -->
<div class="demo-scroll-container">
    <div class="sticky-header">📌 Шапка</div>
    <!-- контент -->
</div>

<!-- Sticky Menu -->
<div class="demo-scroll-container">
    <div class="sticky-menu">
        <a href="#">Головна</a>
        <a href="#">Про нас</a>
    </div>
</div>

<!-- Sticky Card -->
<div class="demo-scroll-container">
    <div class="sticky-card">
        <strong>🔥 Акція!</strong>
    </div>
</div>

<!-- Sticky Badge -->
<div class="demo-scroll-container">
    <div class="sticky-badge">🔔 Нове</div>
</div>

Копіювати