Трясется страница

При скроле вверх до определенной высоты у хедера должен убратся класс "header_fixed" и убратся вверхний отсуп (margin-top) у блока .intro (который в начале документа), но страница начинается трястить при медленном скроле вверх, дохожу до нужной высоты и margin-top убирается с блока .intro и у хедера удаляется класс "header_fixed" и страницу выталкивает вверх до высоты когда опять к хедеру добавляется класс и у интро добавляется отступ, если скролить быстро то это не заметно, и если у хедера с классом "header_fixed" высота не меняется с 175px на 80px а остается 175 то все хорошо.

Код JS:

document.addEventListener('DOMContentLoaded', () => {
    const intro = document.querySelector(".intro");
    const header = document.querySelector(".header");
    const headerHeight = header.offsetHeight;
    const headerFixed = () => {
        let scrollTop = window.scrollY;
        let introHeight = intro.offsetHeight;

        if (scrollTop >= introHeight) {
            header.classList.add("header_fixed");
            intro.style.marginTop = `${headerHeight}px`;
        } else {
            intro.style.marginTop = `0px`;
            header.classList.remove("header_fixed");
        }
    }
    headerFixed();
    window.addEventListener('scroll', () => {
        headerFixed();
    });
});

Код sass:

.header
    background-color: #eff0f2
    min-height: 175px
    display: flex
    align-items: center
    transition: all ease .5s
    @media (max-width: 600px)
        min-height: 130px
    &_fixed
        position: fixed
        top: -80px
        left: 0
        z-index: 60
        width: 100%
        transfotm: translateY(100%)
        min-height: 80px
        @media (max-width: 600px)
            min-height: 80px