Light_Warrior Light_Warrior - 8 months ago 35
CSS Question

I need help finishing a Vertical Dots Navigation on scroll?

I need help in order to create a vertical dots navigation, it needs to add the "active" class based on the section you are currently at when you scroll.

If you are at first section the first dot should be white, the rest transparent, if you are at section two, second dot should be white the first one should be light grey, the rest transparent and so on.

When the background of the section is white, the active class should be blue.

Here is what I tried so far:

// First try 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');

Adding the active class based on click with a smooth animation it's working, but regarding the scroll adding the blue and white active class I still need help.

Help will be greatly appreciated.


Hey check this jsfiddle it was a lot of work to do but i think that all are fixed now

You were doing wrong when using

$('.scroll-fixed a:first').css('background-color', '#d3d3d3');

you should use like this

$('.scroll-fixed li:first a').css('background-color', '#d3d3d3');