В целом вообще всё не правильно. Зачем скрывать один Header и запуливать его транслейтом за пределы видимости и показывать другой? Это не только костыль, но и не семантично.
Если нет противопоказаний для position: sticky используйте это, без всяких скриптов.
Если требуется со скриптом и переключение позиционирования, то одному и тому же Header при прокрутке добавляете/удаляете класс sticky например. И там уже, в css пишете для sticky position fixed.
Это базовый принцип. Но при переключении позиционирования будет скачек контента из-за того что Header вылетает из потока при position fixed.
Поэтому, position fixed и всё стиливое оформление надо назначать для внутреннего блока, который должен быть размещен в Header. У самого Header должна быть настроена только высота.
Или добавлять padding-top равный высоте Header когда он получает класс sticky, для блока следующего за ним.
Эти подходы предотвратят скачек контента при скролле
Простой
Простой
