Как правильно сделать страницу сайта с несколькими слоями, которые двигаются последовательно

Всем привет!

Есть задача сделать страницу сайта состоящую из трех слоев.

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

Изначально делал с изменением position.

• 1 блок - relative
• 2 и 3 блок fixed

При событии скролла менял у после идущего блока fixed на relative. В этом решении есть изъян страница прыгает на декстопе немного, а на телефоне особенно в сафари прям изрядно прыгает.

Второй вариант, который разобрал из Тильды: Это калькуляция или значения top или transformY, но появляются другие баги.

Может у кого есть мысли о правильном принципе решения такой задачи?

Буду рад любой помощи

Вот просто пример на простых формах: http://murubox.tilda.ws/page34184241.html