Как реализовать прокрутку блока с transform: translateY?

Question

[Zbiten]

Приветствую, есть такой codepen

Первый экран при прокрутке уезжает вверх, контент в этом время остается фиксированным вверху страницы.
Как сделать, чтобы при пропадании первого экрана с viewport'a пользователя, контент можно было скроллировать вниз?

Вариант нужен на чистом js!
Заранее благодарен!

Answer 1

[Anton fon Faust]

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

Comments

[Zbiten]

Благодарю за внимание, но появился баг, что контент в самом низу прыгает при скролле, пока обложка в вьюпорте, есть идеи как исправить?

[Anton fon Faust]

Zbiten, по-хорошему, тут сама идея хромает))
я бы сделал так:
1) заблокировал скролл (в обработчике события добавить что-то вроде if(!allowScroll) return false; )
2) отлавливал wheelmouse и по нему двигал бы коричневый блок.
3) как только координаты коричневого блока стали больше нужного значения, разблокируем скролл (denyScroll = true;)