Сложно коротко описать поведение блока, а речь пойдет о sticky позиционировании в css.
Невероятно классная штука position: sticky давно уже существует в спецификации, но пока ощутимая доля интернетчиков пользовалось IE, который не поддерживал значение sticky, разработчики часто избегали использовать его в своей верстке.
Данное значение позволяет гибко, а главное без использования JS назначать контейнеру позиционирование fixed или relative в зависимости от позиции контейнера относительно viewport. При этом диапазон определяется родительским контейнером.
Где может быть полезно данное позиционирование?
Типичное применение — это таблица или grid, где в одной колонке много контента, а во второй — совсем мало. К примеру — это описание товара и изображение.
Когда пользователь листает страницу, он остаётся с пустым правым столбцом, а текст всё продолжается. И вот эта пустота сильно беспокоит дизайнеров, которые либо вообще не используют колонки, либо рассчитывают на короткие тексты, сбалансированные с размерами изображений, что опять же на практике сталкивается с некоторой неудовлетворенностью при реализации.
И тут на помощь приходит position: sticky.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<style> .main { display: grid; grid-template-columns: 50% 50%; width: 500px; } .parent { } .sticky { position: sticky; top: 10px; background: red; } </style> <div class="main"> <div class="text"> <!-- здесь идет длинный текст --> </div> <div class="parent"> <div class="sticky"> Липкий контейнер </div> </div> </div> |
Липкий контейнер начинает вести себя как fixed блок, пока родительский контейнер позволят ему это делать. Пользователь листает текст, а картинка всё время болтается на виду. Правая колонка не содержит пустоты, и дизайнер тоже счастлив.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut dolor non mauris tristique porta. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum mollis, ex sed ornare scelerisque, velit ante accumsan leo, ut luctus ligula ante venenatis ex. Sed nec metus non est imperdiet congue nec nec dolor. Vivamus eu convallis nibh, eu interdum sapien. Quisque ultricies massa ex, quis rutrum erat tincidunt et. Etiam aliquet tempus ante in auctor. Quisque imperdiet fringilla nisl, vel faucibus risus porta accumsan. Nulla tristique magna eget tristique suscipit. Nam ac est eget mi fermentum porta ut placerat libero. Ut nec pretium neque.
Mauris eu mi nec risus bibendum volutpat. Duis eget felis convallis, pretium sapien ut, posuere metus. Maecenas molestie a nunc quis porta. Sed ac justo vitae odio fringilla ultricies. Nullam lacinia sollicitudin elit, id fermentum neque ultricies vitae. Integer commodo arcu id urna egestas facilisis ut eu magna. Curabitur sit amet dui vel leo commodo interdum. Aenean molestie malesuada aliquet. Cras luctus diam eget sem gravida lobortis. Mauris feugiat sapien justo, nec tincidunt sapien gravida nec. Suspendisse a est purus. Morbi commodo eget felis dictum feugiat. Sed sit amet vestibulum dui. Suspendisse potenti. Pellentesque at tincidunt tortor, eget volutpat quam. Nullam vestibulum nulla lorem, eu consectetur diam rhoncus a.
Nullam laoreet mi mauris, vel consequat turpis tempus a. Sed turpis tortor, tempor vel facilisis et, euismod et dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec tristique quam ac ante rhoncus, quis posuere quam faucibus. Maecenas in augue felis. Nam pharetra aliquet mi vitae sollicitudin. Duis sed turpis sed erat dictum maximus. Nulla fermentum euismod lectus eu consequat.
Mauris eu mi nec risus bibendum volutpat. Duis eget felis convallis, pretium sapien ut, posuere metus. Maecenas molestie a nunc quis porta. Sed ac justo vitae odio fringilla ultricies. Nullam lacinia sollicitudin elit, id fermentum neque ultricies vitae. Integer commodo arcu id urna egestas facilisis ut eu magna. Curabitur sit amet dui vel leo commodo interdum. Aenean molestie malesuada aliquet. Cras luctus diam eget sem gravida lobortis. Mauris feugiat sapien justo, nec tincidunt sapien gravida nec. Suspendisse a est purus. Morbi commodo eget felis dictum feugiat. Sed sit amet vestibulum dui. Suspendisse potenti. Pellentesque at tincidunt tortor, eget volutpat quam. Nullam vestibulum nulla lorem, eu consectetur diam rhoncus a.
Важно не забывать указывать значение для top, иначе sticky не сработает.
