Всё довольно просто, ловится событие window scroll и меняется CSS у элемента, в данном случае смещаются X и Y координаты с помощью transform: translate3d
Маржины складываются, вот и всё. То есть например у верхнего блока был нижний маржин 20, а у нижнего блока верхний 10, то сам маржин между ними будет 10. Это то, как работает маржин.
Боюсь, что на чистом CSS с нормальной поддержкой основных браузеров, это не решить. Но можно быстро и удобно решить с помощью JS: brm.io/jquery-match-height