Задать вопрос
@Mysianio
вайти в айти
javascript

Как сделать такую анимацию в алфавитном списке?

Здравствуйте
Идея состоит в том, чтобы при скролле алфавитного списка, буква, на которую начинается данная группа контактов, оставалась на верху, но как только скролл 'сближает' текущую букву, со следующей, текущая буква скролится наверх, а на ее место становится новая буква.

Можно сказать, следующая буква выталкивает текущую букву

Надеюсь эту шизофазию вы смогли разобрать.

Так вот, как легче всего это реализовать? В какую сторону смотреть?
Пробовать все делать через проверку, не соприкасаются ли пиксели букв?
  • Вопрос задан
  • 79 просмотров
Комментировать
Подписаться 1 Средний Комментировать
Решения вопроса 1
@LaraLover
А просто на флексах и sticky-top? пример на бутстрапе 4
<div class="container">
  <div class="row">
    <div class="col-2">
      <p class="sticky-top">A</p>
    </div>
    <div class="col-10">
      <p>AA</p>
      ...
      <p>AZ</p>
    </div>
  </div>
  <div class="row">
    <div class="col-2 sticky-top">
      <p class="sticky-top">B</p>
    </div>
    <div class="col-10">
      <p>BA</p>
      ...
      <p>BZ</p>
    </div>
  </div>
  <div class="row">
    <div class="col-2 sticky-top">
      <p class="sticky-top">c</p>
    </div>
    <div class="col-10">
      <p>CA</p>
      ...
      <p>CZ</p>
    </div>
  </div>
</div>
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Fullstack
OnClass
от 200 000 до 600 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Создать телеграмм бот на Python
25 апр. 2024, в 19:21
10000 руб./за проект
Разработка дизайна для мобильного приложения
25 апр. 2024, в 18:47
2795100 руб./за проект
Ищем программиста для поддержки сайта на PHP Laravel/Symfony
25 апр. 2024, в 18:36
10000 руб./за проект
Ещё заказы