Смена css стиля активного пункта меню, сделанного на zero Tilda, при скролле страницы, с перемещением в центр экрана активного пункта меню?

Question

[dudeMCLovin]

Приветствую, реализовал в zero, горизонтально скроллящееся меню. Сайт предназначен только для мобильного пользования. Блоки с контентом, по которым происходит переход в меню, расположены на одной странице. Повесил на меню, функцию по клику на переключатель (.sw), смену css стиля с неактивного на активный, и якорь на переход, все работает.
При скролле страницы хочу чтобы в меню текущий пункт меню менял стили на активный и сдвигался в зону видимости экрана или вставал по центру по возможности, не могу найти как реализовать.
У каждого пункта меню 3 объекта
пунктов 14, в коде указал 2 просто для понимания классов.
Я сам новичок в этом деле и не могу найти решение, за помощь буду благодарен.
Могу скинуть ссылку на сайт для большего понимания.

//переключатели 

    var sw1 = '.sw1';
    var sw2 = '.sw2'; 

    // задний фон, на нем свой css

    var bg1 = '.bg1'; 
    var bg2 = '.bg2';

    //текст, на нем так же свой css
    
    var t1 = '#rec469651155 .tn-elem[data-elem-id="1657029004446"] .tn-atom';
    var t2 = '#rec469651155 .tn-elem[data-elem-id="1657034603803"] .tn-atom';
    
    $(bg1).addClass('switchOn');
    $(t1).addClass('switchOnn');
    
        $(sw1).on('click', function(){
                $(bg1).addClass('switchOn');
                $(bg2).removeClass('switchOn');
                    
                $(t1).addClass('switchOnn');
                $(t2).removeClass('switchOnn');
            
        })

Comments

[Pashtet221]

ммм ... так есть захотелось