Завдання для самостійної роботи
Спробуйте виконати ці завдання для закріплення навичок роботи з sticky позиціонуванням.
Завдання 1: Створіть sticky заголовок
Створіть веб-сторінку з довгим текстом і заголовком, який прилипає до верхньої частини вікна при прокручуванні. Заголовок повинен мати фон і тінь, коли він "прилип".
Підказка: використовуйте position: sticky; top: 0; і додайте стилі для тіні при зміні класу.
Завдання 2: Сайдбар з sticky навігацією
Створіть макет із двома колонками: основним контентом та боковою панеллю. На боковій панелі розмістіть меню, яке прилипає до верхньої частини батьківського контейнера (сайдбару), а не всієї сторінки.
Підказка: сайдбар повинен мати overflow-y: auto та обмежену висоту, а навігація всередині - position: sticky; top: 0;.
Завдання 3: Каскадні sticky елементи
Створіть сторінку з кількома розділами, де кожен розділ має свій підзаголовок, який прилипає під основним заголовком. При прокручуванні кожен наступний підзаголовок повинен "виштовхувати" попередній.
Підказка: використовуйте JavaScript для динамічного зміщення значення top для кожного наступного sticky елемента на основі висоти попередніх.
Завдання 4: Таблиця з sticky заголовками стовпців та рядків
Створіть велику таблицю з фіксованими заголовками стовпців (при прокрутці вниз) та фіксованими заголовками рядків (при прокрутці вправо).
Підказка: використовуйте position: sticky для заголовків стовпців з top: 0 та для заголовків рядків з left: 0. Заголовок першої комірки потребує top: 0; left: 0; z-index: 2;.