Автор: Stasyuk Eugene 1003 Метки: 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

В основном этого более чем достаточно, чтобы все работало как нужно.

Вернуться на главную

Другие статьи

Покажи свою работу presentation

Покажи свою работу

Покажи свою работу

Прочитал на днях книгу Остина Клеона «Покажи свою работу». Впечатление оставила очень хорошее. Благодаря ей я немного поменял взгляды на свою работу и на сам процесс в целом.  Чем же она меня так впечатлила?  Посыл этой книги довольно прост: покажи свою работу, в том числе и процесс ее создания. Время, когда зрителей интересовал только результат […]

Диапазон дат в WP_Query — вывод постов по meta_query wordpress

Диапазон дат в WP_Query — вывод постов по meta_query

Диапазон дат в WP_Query — вывод постов по meta_query

Класс WP_Query — это один из инструментов WordPress который помогает вывести посты по необходимым параметрам: категории, сортировка, диапазон дат и т.д. Список параметров довольно приличный. Подробнее с ними в документации можно ознакомиться здесь: https://developer.wordpress.org/reference/classes/wp_query/ . Некоторые параметры довольно обширные и иногда куда проще разобраться в них, когда есть готовые примеры. И у меня как раз […]