I currently have a navigation menu set up with the following code:
<ul class="menu-left pl-3">
<li *ngFor="let period of periods; let i = index">>
<a class="mb-4 fragment-link" [class.active]="selectedIndex === i"
[ngClass]="{'text-dark font-weight-bold': selectedIndex === i}" (click)="setIndex(i)"
[routerLink]="['/registrations/list']" fragment="d{{period}}">
{{period}}
</a>
</li>
</ul>
The 'period' in this case represents a school year, for example, 2017-2018.
I am looking to implement dynamic scroll functionality on the page. The goal is to highlight the navigation item corresponding to the school year of the card currently visible to the user. Typically, users register for 2 semesters per school year, making it essential for the navigation to reflect the displayed card. Unfortunately, binding the nav entry directly to a registration entry is not a viable solution.
The structure of the cards is as follows:
<div class="reg_courses_body__main">
<div *ngFor="let registration of registrations">
<div id="d{{registration?.registrationYear.alternateName}}">
<div class="card mt-2 year">
<div class="card-body">
....
</div>
</div>
</div>
</div>
I have attempted the following approach:
$(window).scroll(function() {
const scrollDistance = $(window).scrollTop();
const elements = document.getElementsByClassName('year');
const periods = document.getElementsByClassName('fragment-link');
let j = 0;
for ( let i = 1; i < elements.length; ++i) {
j = i;
if ($(elements.item(i)).position().top - 70 <= scrollDistance) {
continue;
} else {
for ( let k = 0; k < periods.length; ++k ){
if( elements.item(i).parentElement.id === 'd'.concat(periods.item(k).textContent.replace(/\s+/g, ''))) {
j = k;
}
}
$('.menu-left li a.active').removeClass('active text-dark font-weight-bold').addClass('text-gray-600');
$('.menu-left li a').eq(j).addClass('active text-dark font-weight-bold');
}
}
}).scroll();
However, the results were not entirely as expected. 🤔