Прокрутите эту область ↓
Метки слева прилипают, пока секция проходит мимо
Pinned label
Пока эта секция прокручивается, метка остаётся на линии pin.
position: sticky + заданный top удерживают элемент в кадре.
Дополнительный абзац имитирует длинный контент секции. Прокручивайте медленно — метка слева останется на линии pin, пока эта секция не закончится. Следующая секция подхватит sticky без рывка.
Section runway
Высота секции создаёт «взлётную полосу» для sticky-поведения.
Когда секция уходит — pin отпускает и берётся следующий.
Дополнительный абзац имитирует длинный контент секции. Прокручивайте медленно — метка слева останется на линии pin, пока эта секция не закончится. Следующая секция подхватит sticky без рывка.
Stack handoff
Соседние секции передают эстафету без overlap-конфликтов.
Каждый блок — отдельный scroll-контекст внутри demo.
Дополнительный абзац имитирует длинный контент секции. Прокручивайте медленно — метка слева останется на линии pin, пока эта секция не закончится. Следующая секция подхватит sticky без рывка.
Scroll sync
activeIndex показывает, чья секция сейчас у pin-линии.
CSS Variables обновляются на scroll через rAF.
Дополнительный абзац имитирует длинный контент секции. Прокручивайте медленно — метка слева останется на линии pin, пока эта секция не закончится. Следующая секция подхватит sticky без рывка.
Long copy
Длинный текст справа имитирует реальный контент секции landing page.
Pin помогает держать контекст (заголовок, номер, метку) на экране.
Дополнительный абзац имитирует длинный контент секции. Прокручивайте медленно — метка слева останется на линии pin, пока эта секция не закончится. Следующая секция подхватит sticky без рывка.