Как сделать двустороннее прилипание с position: sticky?

Question

[Андрей]

Без лишних слов: хочу реализовать поведение, аналогичное вот этому скрипту. Из принципа хочется попытаться реализовать на чистом css. Возможно ли это?

Была мысль сделать несколько вложенных блоков, с разными параметрами прилипания, но все равно упираюсь в js, который бы переопределял стили для событий прокрутки вверх или вниз (тогда бы можно было обойтись и одним блоком, но повторюсь, что просто из интереса поставил себе цель решить это на чистом css).

Comments

[Алексей Уколов]

Что вы имеете в виду под двусторонним прилипанием?

[Андрей]

Не знал, как это лаконично назвать, выдал это. В принципе, по ссылке видно, о чем речь, и есть еще один живой повседневный пример - левый сайдбар ВК на странице пользователя.

Скроллишь вниз, сайдбар будет статичен, до тех пор, пока не будет достигнута его нижняя граница, затем он закрепляется в этом положении, при прокрутке вверх аналогичное поведение.

[Алексей Уколов]

По ссылке несколько примеров и если бы было «видно о чём речь», вопроса бы не возникло. А то, что вы описываете у ВК — это же дефолтное поведение sticky.

[Андрей]

Алексей Уколов, да нет, там суть одна, это показано на изображении.
VK это не стандартное поведение, как раз-таки. Стандартное — строгое прилипание по заданному параметру, то есть, если высота сайдбара превышает 100vh, то содержимое, превышающее это значение, можно будет увидеть лишь прокрутив страницу до конца (или до конца родительского блока).

Быть может я что-то не понимаю, тогда был бы рад увидеть небольшое пояснение :)

Answer 1

[AngReload]

sticky не уходит за границы своего контейнера. Просто сделайте родительский элемент высотой во всю колонку, и уже в него поместите элемент с position: sticky.
Оу, из комментариев понял что вам нужно немного другое поведение.

Upd: моя лучшая идея

но высота блока жестко прописана, не знаю как иначе.