как горизонтально активировать активную вкладку при прокрутке мимо определенной точки на странице

Question

Я работаю над адаптивным сайтом и хочу добавить в его мобильные представления следующие функции:

1. Должна быть горизонтальная прокрутка Navbar
2. Активные вкладки должны переключаться при прокрутке мимо определенных точек на странице
3. Активные вкладки должны располагаться по центру на его горизонтальной прокрутке при прокрутке соответствующих разделов на мобильных устройствах

Я использую эту функцию банковский сайт, который является публичным c доменом (https://www.uob.com.sg/privilegebanking/wealth/invest/foreign-exchange-access.page

До сих пор я выполнил пункты 1 и 2. Я борюсь с получением вкладок для прокрутки к центру на горизонтальная полоса прокрутки.

Мой код для этого следующий:

JS:

function activeHorizontal() {
    var navWidth = $('.sticky-nav').width()
    var activeFromLeft = $('.nav-tabs li.active').scrollLeft()
    var distToActiveFromRight = (navWidth/2) - (activeFromLeft);

    console.log(navWidth, activeFromLeft, distToActiveFromRight);
    $('.sticky-nav').animate({
        scrollLeft: activeFromLeft - distToActiveFromRight
    });
}

HTML:

<div id="sticky-navibar" class="container px-0">
   <div class="sticky-wrapper">
       <div class="sticky-nav no-mask scrolltabs-container col-4">
           <ul class="nav-heading nav nav-tabs nav-justified scrolltabs">
               <li class="active"><a href="#overview" title="Overview">Overview</a></li>
               <li class=""><a href="#benefits">Benefits</a></li>
               <li class=""><a href="#rewards">Exclusive Cash Rewards</a></li>
               <li class=""><a href="#getStarted">Get Started</a></li>
           </ul>
       </div>
    </div>
</div>

Может ли кто-нибудь помочь мне с этим. Спасибо!