Добрый день!
Чтобы реализовать эффект "лесенки" или "ступенек" с использованием свойства `position: sticky`, можно использовать несколько блоков, которые будут накладываться друг на друга с растущим значением `top`. Вот пример, как можно это сделать в HTML и CSS:
### HTML
```html
<div class="container">
<div class="block block1">Блок 1</div>
<div class="block block2">Блок 2</div>
<div class="block block3">Блок 3</div>
<div class="block block4">Блок 4</div>
<div class="block block5">Блок 5</div>
</div>
```
### CSS
```css
body {
margin: 0;
font-family: Arial, sans-serif;
}
.container {
height: 200vh; /* Создадим пространство для прокрутки */
padding: 20px;
}
.block {
background-color: #3498db;
color: white;
padding: 20px;
margin: 10px 0;
border-radius: 5px;
position: -webkit-sticky; /* Для Safari */
position: sticky;
}
/* Устанавливаем различные отступы для каждого блока */
.block1 {
top: 0;
}
.block2 {
top: 10px; /* Смещение на 10px от предыдущего блока */
}
.block3 {
top: 20px; /* Смещение на 20px от предыдущего блока */
}
.block4 {
top: 30px; /* Смещение на 30px от предыдущего блока */
}
.block5 {
top: 40px; /* Смещение на 40px от предыдущего блока */
}
```
### Примечания:
1. Убедитесь, что общий контейнер для блоков достаточно высок (в данном случае `200vh`), чтобы было место для прокрутки и проявления эффекта "стикера".
2. Каждый блок имеет разные значения `top`, что позволяет им накладываться друг на друга с эффектом ступенек при прокрутке.
3. Чтобы увидеть эффект, нужно прокрутить страницу. Блоки будут оставаться на экране, но смещение будет создавать визуальный эффект лесенки.
С помощью этого кода вы сможете воссоздать эффект, который видели на указанной вами странице. Вы можете изменить стили под свои нужды и экспериментировать с различными значениями, чтобы добиться желаемого визуального эффекта.