Возможно ли в scrollspy прокрутить идею контента, и меню также должно прокручиваться, как список контактов (iphone)?

Question

Нормальный / Текущий поток : - Я пытаюсь подключить вертикальное меню начальной загрузки, которая использует scrollspy, она работает отлично, когда я прокручиваю область содержимого, она отлично работает при выборе в меню.

Условие : - У меня динамическое меню, т.е. оно содержит различное количество списка и его содержимого.Меню имеет высоту 400px, с более чем 20/30 элементами.

Когда пользователь прокручивает вниз, вверх по области содержимого, нажимает на элемент меню.

Основная работа меню аналогична: - https://codepen.io/daybydayglo/pen/zNBYBP

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

HTML & jQuery

<div id="mainNav"> 
    <div style="text-align: center;"><i class="fa fa-arrow-up"></i></div>
    <ul class="mainnavlist">
        <li class="nav-item current">
            <a class="nav-link" href="#CusNavSec-1">
                Section 1 
            </a>
        </li>
        <li class="nav-item current">
            <a class="nav-link" href="#CusNavSec-2">
                Section 2 
            </a>
        </li>
        <li class="nav-item current">
            <a class="nav-link" href="#CusNavSec-3">
                Section 3 
            </a>
        </li>

    </ul>
</div>

$(window).on('activate.bs.scrollspy', function (e, obj) {
    var itemnum = $('#mainNav').find("li a.active").attr('data-num');

});

Допустим, в моем меню у меня 20 пунктов, а в меню 400px отображаются 4 пункта и оставшиеся 16 элементов скрыты, но когда прокручивается с правой стороны в область содержимого 13 (раздел содержимого), прокручивается в меню и показывает элемент 13 с некоторой анимацией!