Currently, I am facing an issue with a template and trying to resolve it. The problem lies with the highlighting effect on the navigation menu, which only seems to work on a reduced browser height. When I resize the window to full screen and scroll down to section 7 on an iMac with a 27-inch screen, the link on the navigation menu does not get highlighted.
To better illustrate, you can view the issue in this image: https://i.sstatic.net/SVWqQ.png
After examining the JavaScript code, I believe the function controlling the link highlight is as follows:
$(window).scroll(function() {
var scrollDistance = $(window).scrollTop();
// Assign active class to nav links while scrolling
$('.page-section').each(function(i) {
if ($(this).position().top <= scrollDistance) {
$('.navigation a.active').removeClass('active');
$('.navigation a').eq(i).addClass('active');
}
});
}).scroll();
I am looking for a way to modify the code so that it can adapt to all screen sizes. Additionally, I would like to make the section interactive with Bootstrap. As someone new to front-end development, I appreciate any assistance provided!