<script>
$( document ).ready(function() {

//Кол-во видимых пунктов - нечётное число
let lineCount = 5;
//Высота пункта меню
let lineHeight = $('.t607__list_item').outerHeight();


let scrolldistance = 700; //Дистанция скролла
    let blockMenu = '[data-record-type="607"]'; 
    $(blockMenu).addClass('hide-menu');
    setTimeout(function(){ 
        $(blockMenu).addClass('transtime')
        if($(document).scrollTop()>scrolldistance){$(blockMenu).addClass('show-menu')};
    }, 500);
    $(window).scroll(function() { 
        var top = $(document).scrollTop();
        if (top >= scrolldistance) { 
          $(blockMenu).addClass('show-menu');
        } else {
          $(blockMenu).removeClass('show-menu'); 
        }
    });


//Кол-во пунктов в блоке
let col = $('.t607__list_item').length;

//Создаём родительский блок для списка пунктов меню
$('.t607__list').wrap('<div class="t607__list-wrapper"></div>');

//Задаём область видимости
$('.t607__list-wrapper').css('max-height', lineCount*lineHeight);

//Добавляем стрелки
$('.t607__list-wrapper').prepend('<div class="t607_arrow-up t607_arrow"></div>');
$('.t607__list-wrapper').append('<div class="t607_arrow-down t607_arrow"></div>');

//Получаем индекс активного пункта
function getIndexMenu(){
    return $('.t607 .t-menu__link-item').index( $('.t607 .t-menu__link-item.t-active') )+1;  
};


//Функция смены положения меню
function changePosition(){
    setTimeout(function(){
        //Получаем индекс активного пункта
        let activeNum = getIndexMenu();

        if(activeNum>lineCount){
            let step = (activeNum-lineCount)*lineHeight;
            $('.t607__list').css('transform', 'translateY(-'+step+'px)');
        }else{
            $('.t607__list').css('transform', 'translateY(0px)');
        };

    }, 150);     
};

//При открытии страницы
changePosition()

//При нажатии стрелки вниз
$('.t607').on('click', '.t607_arrow-down', function(){
    
    //Получаем индекс активного пункта
    let activeNum = getIndexMenu();
    //Переходим на пункт ниже
    if(activeNum!=col && activeNum){
         $('.t607 .t-active').closest('.t607__list_item').next('.t607__list_item').find('a')[0].click();
    };
    if(activeNum==0) $('.t607__list_item:first').find('a')[0].click();
    changePosition();
     
});

//При нажатии стрелки вверх
$('.t607').on('click', '.t607_arrow-up', function(){

    //Получаем индекс активного пункта
    let activeNum = getIndexMenu();
    
    //Переходим на пункт выше
    if(activeNum!=1  && activeNum){
        $('.t607 .t-active').closest('.t607__list_item').prev('.t607__list_item').find('a')[0].click();
    }; 
    if(activeNum==0) $('.t607__list_item:last').find('a')[0].click();
    changePosition();
});


//При нажатии на пункт меню
$('.t607').on('click', '.t607__list_item', function(){
        changePosition();
});

//Отслеживание изменений пунктов еню при скролле

let observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      if (mutation.attributeName === "class") {
            let attributeValue = $(mutation.target).prop(mutation.attributeName);
            changePosition();
      }
    });
  });
  
$(".t607 .t-menu__link-item").each(function() {
    observer.observe(this, {
      attributes: true
    });
});





});	
</script>


<style>
.t607 .t-menu__link-item .t607__tooltip {
    color: #767C98 !important;
    visibility: visible;
    opacity: 100%;
    transform: translateX(-0%) translateY(-50%);
    top: 50%;
}
.t607 .t-menu__link-item:hover .t607__tooltip {
    color: #06B471 !important;
    font-weight: 600 !important;
}

.t607 .t-menu__link-item.t-active .t607__tooltip {
    color: #06B471 !important;
}

.t607  a.t-menu__link-item {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
}

.t607__list-wrapper {
    overflow: hidden;
}

.t607 .t-menu__link-item:hover .t607__tooltip {
    -webkit-transform: translateX(0%) translateY(0%);
    transform: translateX(0%) translateY(0%);
}

.t607__tooltip {
    position: static;
    transform: none !important;
}

.t607__dot {
    position: relative;
    top: -1px;
}

.t607_arrow {
    width: 25px;
    height: 15px;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.5;
    cursor: pointer;
    left: 50%;
    top: -12px;
    transform: translateX(-50%);
}

.t607_arrow-up{
    background-image: url(https://static.tildacdn.com/tild6266-3966-4139-b034-626539343663/arrow-up_1.svg);
}

.t607_arrow-down {
    background-image: url(https://static.tildacdn.com/tild6338-6263-4366-a634-616131323432/arrow-down_1.svg);
    bottom: -12px;
    top: auto;
}

.t607_arrow:hover {
    opacity: 1;
}

.t607__list {
    transition: all 0.3s ease-in-out;
}


.hide-menu {
    opacity: 0;; 
}
.show-menu{
    opacity: 1;
}
.transtime{transition:  all 0.3s cubic-bezier(0, 0, 0.8, 1.0)}

</style>