Как сделать логику такого скролла?

Question

[danilr]

Смотреть картинку.
Нужно сделать логику скролла так - когда скроллишь всю страницу и доходишь до "серого" блока (то есть он доходит до хедера: 60px от топа), то "зелёный" блок должен остаться на месте, а скролиться блок "фиолетовый" (в нём может быть куча синих блоков) и когда скролл "фиолетового" блока заканчивается, то далее по обычному поведению "серый блок" при скорлле уходит вверх.
P.s. хедер в position:fixed; такая логика должна работать когда курсор находится и на зелёном блоке.
Подскажите как сделать, пожалуйста. Нужен ли Js, наверняка я не знаю.

Answer 1

[Алексей Юдов]

JS тут явно не нужен, если я правильно понял вам подойдет это, а вот второй пример

Comments

[danilr]

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

[Алексей Юдов]

danilr, sticky сносно работает вот пример

[danilr]

TCloud, а теперь добавь блоку violet - высоту как у green. И также overflow-y: scroll;

[Алексей Юдов]

danilr, это не зачем делать. Исправляйте свой костыль.

[danilr]

TCloud, мне нужно чтобы они были в родители одного размера. Окей, кейс такой - высота экрана 800px, а зелёный блок 300px - и в итоге получаем какую-то рваную вертску (паровозик и маленький блок)

[Алексей Юдов]

danilr, реализовывайте свой костыль сами.

Answer 2

[Константин Б.]

Ищите в гугле sticky sidebar JS