Как: держать Bootstrap 4's Scrollspy на цели

Question

Страница: AngularJs 1.7.5 / Boostrap 4.x

Итак, у меня есть страница с боковой навигацией, где элементы навигации - это переходы к контенту вверх и вниз по странице. , Некоторые ссылки в навигации генерируются в ng-repeat (и ссылка на контент на главной странице, которая также генерируется). Ссылки работают фантазии c. Прыгай туда, где я им говорю, и все замечательно. Сгенерированный номер ссылки (на данный момент в моем тесте) 5.

Но я также использую ScrollSpy, поэтому ссылки подсвечиваются и отслеживаются при прокрутке пользователя, и именно здесь возникает проблема. Когда я go наверх страницы и начинаю прокрутку вручную (например, с помощью моего колеса прокрутки или с помощью полосы прокрутки), первый элемент меню (сгенерированный) пропускается при выделении. 2-й и 3-й пункты меню (сгенерированные) подсвечиваются, а затем 4-й и 5-й (сгенерированные) нет. После этого остальные ссылки подсвечиваются, пока вы не приблизитесь к двум последним, которые являются очень маленькими разделами. От второго до последнего не подсвечивается, но вместо этого, когда вы переходите к нему с помощью прокрутки, выделяется ссылка FINAL в меню.

Все они имеют разные идентификаторы (уникальные) и снова ссылки для перехода к разделы работают.

код:

<div class="row p-0 m-0">
    <!-- Left Nav -->
    <div class="col-3 pl-1 d-none d-md-block" id="scrollSpy">
        <ul class="list-group sticky-top sticky-offset" id="sideNav">
            <li class="nav-item" ng-if="!vm.HasValue(vm.upcomingClasses)">
                <span class="nav-link">No Classes Scheduled</span>
            </li>
            <!-- These are the links where ScrollSpy is hit-or-miss -->
            <li class="nav-item" ng-repeat="uc in vm.upcomingClasses">
                <a class="clickable nav-link" data-target="#{{uc.ScheduledId}}" scroll-to="{{uc.ScheduledId}}">
                    {{uc.ShortClassDate | date: 'MM/dd/yyyy'}} &#0151; {{uc.ClassTitle}}
                    {{(uc.ClassTopic !== "None" ? ", " + uc.ClassTopic : "")}} [<em>{{uc.ClockHours}} {{(hrs > 1 ? "hrs" : "hr")}}</em>]
                    <span ng-if="uc.ClassIsCanceled"><br /><b>CANCELED</b></span>
                </a>
            </li>
            <li class="nav-item" ng-if="vm.operationId !== 10 && vm.operationId !== 166">
                <a class="clickable nav-link" data-target="#schoolPolicies" scroll-to="schoolPolicies">School Policies</a>
            </li>
            <li class="nav-item" ng-if="vm.operationId !== 166">
                <a class="clickable nav-link" data-target="#courseOfferings" scroll-to="courseOfferings">Course Offerings</a>
            </li>
            <li class="nav-item" ng-if="vm.operationId !== 166">
                <a class="clickable nav-link" data-target="#ourInstructors" scroll-to="ourInstructors">Our Instructors</a>
            </li>
        </ul>
    </div>

    <!-- Body -->
    <div class="col-12 col-md-9">
        <!-- Welcome -->
        <!-- untracked section that isn't part of the navigation structure, but is just the welcome text of the page -->


        <!-- Upcoming Classes -->
        <h3 ng-if="vm.HasValue(vm.upcomingClasses)" class="mt-4">Upcoming Classes</h3>

        <div class="row p-0 m-0">
            <div class="col-12 p-0 m-0" ng-repeat="sc in vm.upcomingClasses">
                <div id="{{sc.ScheduledId}}"></div>
                <!-- Repeated content here -->
            </div>
        </div>

        <!-- School Policies -->
        <div ng-if="vm.operationId !== 166" class="mt-4">
            <div id="schoolPolicies"></div>
            <!-- Bunch of content here -->
        </div>

        <!-- Course Offerings-->
        <div ng-if="vm.operationId !== 166" class="mt-4">
            <div id="courseOfferings"></div>
            <!-- list of courses here -->
        </div>

        <!-- Instructors -->
        <div ng-if="vm.operationId !== 166" class="mt-4">
            <div id="ourInstructors"></div>
            <!-- list of instructors here -->
        </div>
    </div>
</div>

Этот повторитель в списке навигационных ссылок выводит следующее:

И, как вы можете видеть, цели данных в навигационных ссылках уникальны. Кроме того, вот сгенерированный вывод, на который нацелены эти ссылки:

Ссылки работают отлично, но ScrollSpy выделяет только 2-ю и 3-ю сгенерированные ссылки, и stati c ссылки после сгенерированного списка.

Help!

Редактировать: Добавление в изображение "Это то, что происходит":

Как вы можете видеть, я нажал на последнюю из сгенерированных ссылок ... и она там правильно переместилась ... но в меню выделен третий пункт!