I'm struggling to create a vertical dots navigation that dynamically adds the "active" class based on the section currently in view while scrolling.
For example, if you are on the first section, the first dot should be white and the rest transparent. As you scroll to the second section, the second dot turns white, the first one light grey, and so on.
If the background of a section is white, the active class should change to blue.
This is what I have attempted so far: https://jsfiddle.net/wx38rz5L/2075/
// Attempting to add active class based on Scroll
var top1 = $('#firstproject-header').offset().top;
var top2 = $('#firstproject-team').offset().top;
var top3 = $('#firstproject-about').offset().top;
var top4 = $('#firstproject-lorem').offset().top;
var top5 = $('#firstproject-contact').offset().top;
$(document).scroll(function() {
if ($(document).scrollTop() >= top1 && $(document).scrollTop() < top2) {
$('.scroll-fixed a:first').addClass('active');
$('.scroll-fixed a:last').removeClass('active');
} else if ($(document).scrollTop() >= top2 && $(document).scrollTop() < top3) {
$('.scroll-fixed a:first').css('background-color', '#00f');
$('.scroll-fixed a').css('background-color', '#0f0');
} else if ($(document).scrollTop() >= top3 && $(document).scrollTop() < top4) {
$('.scroll-fixed a').css('background-color', '#00f');
} else if ($(document).scrollTop() >= top4 && $(document).scrollTop() < top5) {
$('.scroll-fixed a').css('background-color', '#222');
}
else if ($(document).scrollTop() >= top5) {
$('.scroll-fixed a:last').addClass('active');
$('.scroll-fixed a:first').removeClass('active');
}
});
While I managed to add the active class based on click with a smooth animation, I'd appreciate some assistance with adding the blue and white active classes when scrolling through sections.
Any help would be greatly appreciated.