1) Добавил will-change: top; для headerэто я уже слышал, и говорю что - оставь как есть) прыгает но не везде
2) изменил на top
к сожалению результат тот же
position: fixedа и не надо fixed, fixed от document работает, так же через стики но по другому сверстать и синхронизировать скроллы по процентам, при скролле просто двигаешь блоки на 1% или 2% каждый ( имею ввиду 2 горизонтальных скролла ), тогда он будет синхронизирован, в общем я тут всё, удачи в решении
поэкспериментировать посмотреть если варианты решения, если не поможет, как вариант синхронизировать скроллы уже по X, в общем вариантов куча, тут можно днями сидеть и проверять разные варианты , пока не сделаешь идеал
И что даст изменение структуры?
top изменяй а не translateY + добавь will-change: top; для header, трансформация анимирует и фон, что тоже влияет на производительность+ стили бы поправил на нормальные и всё, и не парился бы
Пробовал разные варианты в том числе и на JS IntersectionObserver, но если у шапки ставить position absolute или fixedте надо что бы она изначально была вообще простом состоянии ( в котором она должна скролиться в блоке со скроллом горизонтальным, а при вертикальном скролле уже отслеживать её и добавлять к ней уже fixed
а на блоки эти повесить анимации ( ну и подогнать их между друг другом )на вложенные блоки