Автор: Stasyuk Eugene 240 Мітки: 25.06.2022

Position sticky не працює – на мій подив це доволі частий запит, з яким я сам свого часу зіткнувся. Sticky – це досить просте й універсальне рішення для розміщення липких блоків на сторінці. Як мінімум, воно не вимагає від тебе пристойної кількості javascript коду, який і працював місцями кострубато. Зараз же цю процедуру можна зробити всього лише за допомогою використання декількох css директив.

І так, для непосвячених – ось як працює position sticky: https://codepen.io/jecosjmecos/pen/oNOMBxz

Чому position sticky не працює?

I feel sticky

Почнемо з розгляду можливої проблеми, а потім поговоримо про те, як використовувати sticky. Свого часу я зіткнувся з цією проблемою. Можливо, річ у тім, що в одного з батьків елемента є властивість overflow: hidden, auto, scroll. У прикладі вище наш липкий блок має батька з класом .container, який має батька <section>. Так ось, якщо одному з цих батьків прописати властивість overflow, блакитний блок перестане переміщатися всередині. Перевіряйте 😁

Як працює?

position sticky

У прикладі вище ми можемо бачити два блоки: червоний блок ліворуч і прозорий блок праворуч (.blue-wrapper). Усередині правого блоку є синій блок. Висота цього невеликого блоку менша за висоту його батька. Тож, за допомогою героя нашої статті, ми можемо змусити синій блок рухатися в межах його батька, коли користувач скролитиме сторінку. Мабуть, це весь принцип його використання.

Усе, що нам необхідно зробити, – це:

  • Додати блакитному блоку (елементу з класом .blue) властивість position: sticky
  • Визначитися з тим, куди блок буде прилипати – до верху чи до низу. У моєму прикладі він нагорі, тому додаємо властивість top: 15px
  • Простежити, щоб батьки елемента не мали властивостей overflow: hidden, auto, scroll

Здебільшого цього більш ніж достатньо, щоб усе працювало як треба.

Повернутися на головну

Інші статті

Хостинг Cloudabove: як програмно очистити кеш на сервері.

Хостинг Cloudabove: як програмно очистити кеш на сервері.

Хостинг Cloudabove: як програмно очистити кеш на сервері.

Cloudabove має можливість прискорити сайт шляхом кешування на сервері. За замовчуванням цей кеш очищається кожні 15 хвилин. Це досить вагомо прискорює сайт, але при цьому впливає на відображення контенту. Наприклад, у моєму випадку опублікований користувачем відгук на товар з’являвся тільки через 15 хвилин. Очистити кеш досить просто. В основі цього лежить GET запит на https://scout.cloudabove.com/api/cache/purge. […]

Діапазон дат у WP_Query – виведення постів за meta_query wordpress

Діапазон дат у WP_Query – виведення постів за meta_query

Діапазон дат у WP_Query – виведення постів за meta_query

Клас WP_Query – це один з інструментів WordPress, який допомагає вивести пости за необхідними параметрами: категорії, сортування, діапазон дат тощо. Список параметрів досить пристойний. Детальніше з ними в документації можна ознайомитися тут: https://developer.wordpress.org/reference/classes/wp_query/ . Деякі параметри досить великі й іноді куди простіше розібратися в них, коли є готові приклади. І у мене якраз такий є. […]