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
В основном этого более чем достаточно, чтобы все работало как нужно.
