I have been utilizing a code snippet from this source to incorporate a vertical dot navigation feature into a single-page website. The navigation smoothly scrolls to different sections when a link is clicked, with an active highlight on the current section. I made several adjustments to the CSS to customize its appearance and then swapped out the sections.
However, I encountered an issue where the fourth and fifth dots do not react as expected - selecting the fourth dot also highlights the fifth one. This behavior occurs across multiple devices, unlike in the jsfiddle demo. On my Squarespace site, it appears like this. Any insights or assistance on what might be causing this discrepancy would be greatly appreciated.
You can access the Squarespace site through this link.
Here is the Jsfiddle link containing my code, along with the pasted JavaScript code below:
$(document).ready(function(){
$('.awesome-tooltip').tooltip({
placement: 'left'
});
$(window).bind('scroll',function(e){
dotnavigation();
});
function dotnavigation(){
var numSections = $('section').length;
$('#side-nav li a').removeClass('active').parent('li').removeClass('active');
var sections = $('section');
var i = 0;
for (i = 0; i < sections.length; i++) {
var ele = $(sections[i]), nextTop;
//console.log(ele.next().html());
if (i < sections.length - 1) {
nextTop = Math.floor($(sections[i + 1]).offset().top);
}
else {
nextTop = $(document).height();
}
if (ele.offset() !== null) {
thisTop = Math.floor(ele.offset().top - ((nextTop - ele.offset().top) / numSections));
}
else {
thisTop = 0;
}
var docTop = $(document).scrollTop();
if(docTop >= thisTop && (docTop < nextTop)){
console.log(docTop + ":" + thisTop + ":" + nextTop );
$('#side-nav li').eq(i).addClass('active');
}
}
}
/* get clicks working */
$('#side-nav li').click(function(){
var id = $(this).find('a').attr("href"),
posi,
ele,
padding = 0;
ele = $(id);
posi = ($(ele).offset()||0).top - padding;
$('html, body').animate({scrollTop:posi}, 'slow');
return false;
});
Thank you in advance for any help you can provide!