Горизонтальное меню в zero-блоке с фиксацией при скролле

<style>

/* #rec320507530 — ID блока меню */

#rec320507530 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
}

</style>

<style>

/* #rec320507530 — ID блока меню */

#rec320507530 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
}

#rec320507530 .t396__artboard {
    transition: all 0.2s; /* 0.2s — Время анимации*/
}

#rec320507530 .t396__artboard:hover {
    background-color: #fff !important; /* #fff — Цвет фона*/
}

</style>

<style>

#rec321363021 {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    height: 100px; /*Высота горизонтального меню на десктопе*/
    width: 100%;
    overflow: hidden;
    transition: all 0.3s ease-in-out; /*Время появления раскрытого меню*/
}

/*Брейкпоинт 960 рх*/
@media (max-width: 960px)  
{
#rec321363021 {
    height: 60px; /*Высота горизонтального меню на мобильных*/
}
}

#rec321363021 .t396__artboard {
    height: 100vh !important;
}

</style>

<script>

var count = 0;
var btn = document.getElementsByClassName('main_menu_btn'); /*Класс кнопки вызова меню*/
btn = btn[0];
btn.onclick = function() {
    count++;
    var open_menu = document.getElementById('rec321363021');
    if (count%2 === 0) {
        var closed_menu = document.getElementById('rec321363021');
        /*Брейкпоинт 960 рх*/
        if (window.screen.width >= 961) {
            closed_menu.style.height = '100px'; /*Высота горизонтального меню на десктопе*/
        }
        else {
            closed_menu.style.height = '60px'; /*Высота горизонтального меню на мобильных*/
        }
        document.body.style.overflow = 'auto';
    }
    else {
        open_menu.style.height = `100vh`;
        document.body.style.overflow = 'hidden';
    }
}

</script>

<style>
#rec357377977 {
    position: fixed;
    top: 0px;
    left: 0;
    width: 100%;
    z-index: 9999;
    transition: all 0.5s; /* Время исчезновения меню */
}
</style>

<script>
$(document).scroll(function() {
  var y = $(this).scrollTop();

  // #rec357377977— идентификатор меню
  var top_menu = document.getElementById('rec357377977');

  // 1600 — расстояние в px, после которого исчезнет меню
  if (y > 1600) {
    top_menu.style.top = '-120px'; // 120рх — высота меню
  } else {
    top_menu.style.top = '0px';
  }
});
</script>

<style>
#rec384367646 {
    position: fixed;
    top: -120px; /* Высота меню */
    left: 0;
    width: 100%;
    z-index: 9999;
    transition: all 0.5s; /* Время появления меню */
}
</style>

<script>
$(document).scroll(function() {
  var y = $(this).scrollTop();

  // #rec384367646 — идентификатор меню
  var top_menu = document.getElementById('rec384367646');

  // 1200 — расстояние в px, после которого появится меню
  if (y > 1200) {
    top_menu.style.top = '0px';
  } else {
    top_menu.style.top = '-120px';
  }
});
</script>