Position sticky не працює – на мій подив це доволі частий запит, з яким я сам свого часу зіткнувся. Sticky – це досить просте й універсальне рішення для розміщення липких блоків на сторінці. Як мінімум, воно не вимагає від тебе пристойної кількості javascript коду, який і працював місцями кострубато. Зараз же цю процедуру можна зробити всього лише за допомогою використання декількох css директив.
І так, для непосвячених – ось як працює position sticky: https://codepen.io/jecosjmecos/pen/oNOMBxz
Чому position sticky не працює?
Почнемо з розгляду можливої проблеми, а потім поговоримо про те, як використовувати sticky. Свого часу я зіткнувся з цією проблемою. Можливо, річ у тім, що в одного з батьків елемента є властивість overflow: hidden, auto, scroll. У прикладі вище наш липкий блок має батька з класом .container, який має батька <section>. Так ось, якщо одному з цих батьків прописати властивість overflow, блакитний блок перестане переміщатися всередині. Перевіряйте 😁
Як працює?
У прикладі вище ми можемо бачити два блоки: червоний блок ліворуч і прозорий блок праворуч (.blue-wrapper). Усередині правого блоку є синій блок. Висота цього невеликого блоку менша за висоту його батька. Тож, за допомогою героя нашої статті, ми можемо змусити синій блок рухатися в межах його батька, коли користувач скролитиме сторінку. Мабуть, це весь принцип його використання.
Усе, що нам необхідно зробити, – це:
- Додати блакитному блоку (елементу з класом .blue) властивість
position: sticky - Визначитися з тим, куди блок буде прилипати – до верху чи до низу. У моєму прикладі він нагорі, тому додаємо властивість
top: 15px - Простежити, щоб батьки елемента не мали властивостей
overflow: hidden, auto, scroll
Здебільшого цього більш ніж достатньо, щоб усе працювало як треба.
