Как сделать липкий сайдбар на чистом CSS / How to do sticky sidebar only pure css

preview_player
Показать описание
Сегодня я расскажу как сделать липкий элемент с помощью каскадных таблиц стилей, причем без применения js плагинов jquery, на чистом css.

0:00 Вступление
0:20 Свойство css - position: fixed;
1:20 Делаем липкий сайдбар на CSS;
2:40 Почему не работает position: sticky.

Для того, чтобы сделать липкий сайдбар на css нам необходимо разобраться со свойством css position sticky. Этот вид позиционирования появился относительно недавно и им пользуются мало разработчиков.

Позиционирование sticky ближе всего к свойствам, таких позиционирований как relative, absolute и fixed. И оно вобрало в себя свойства этих позиционирований.

С помощью position sticky можно сделать липкий сайдбар, херед, подвал или любые другие элементы. Главное понимать как работает свойство sticky.
Рекомендации по теме
Комментарии
Автор

Не пойму почему так мало лайков. я перечитала 10 статей и не получалось сделать при помощи стики. глянула 4мин видос и вуаля. Спасибо большое

ЛюсяРыбальченко-зш
Автор

У кого не работает - убирайте overflow: hidden; у ваших оберток.

ДмитрийКузан-юф