Привязать блок при прокрутке
position: sticky; /* Липкое позиционирование */
position: -webkit-sticky;/*Решение для вебкит (IOS и т.д.)*/
top: 0; /* Положение сверху (при активации)*/
Элемент с position: sticky;
фиксируется в рамках ближайшего родителя, когда расстояние до границы ближайшего прокручиваемого родителя достигает указанного в свойствах top
, right
, bottom
, left
значения. На то, в каком месте элемент прикрепится и где отцепиться, также влияют свойства padding, margin и transform. Размещение элемента над другими элементами правится с помощью свойства z-index.
После того, как свойство position
примет значение sticky
, размер элемента не изменится, а соседние элементы не сдвинутся на освободившееся пространство.
sticky не работает
Обязательно чтобы у родительского элемента была чётко задана высота, или там был бы другой блок у которого есть высота., Иначе sticky не будет работать, поскольку он прокручивается внутри блока, в котором вся высота и есть высота блока со sticky.