Vfrdtyky

I asked similar question but didn't get an answer so I will try again. I have a single web page. In this page , I am trying to make a side navigation made out of Dots. Web page is broken to sections . I need to make it so every time I scroll to another section , the dot changes color. For example : First section - first dot is green, others are empty. Than if I go to 2nd section, the 2nd dot goes green and others are empty.
Here is the fiddle :
https://jsfiddle.net/c1d3tfnL/2/

My guess is that there is a problem somewhere in this part

for (var i=0; i < aArray.length; i++) {

    var theID = aArray[i];

    console.log(theID);



    if (panel.hasClass('current')) {

      $("a[href='#" + theID + "']").addClass('greens');



  } else {

      $("a[href='#" + theID + "']").removeClass('greens');



  }

but I am not sure . Instead of having only one dot colored , They are all green.

You will see the dots in the top of the page but as I have an internal database I can't post everything here . It is supposed to look like this :

I have done everything including that it is fixed . This is how it looks now.

Every circle is always green . This is making me crazy .

The problem is selecting the sections. What you're doing right now is to take all elements with class panel and try to see if it contains the class current. Having if (panel.hasClass('current')) will always return true because there will always be an element with class panel who has that class therefor all the dots will be green. You need a new selector to match your a with your sections.

<a section-id="hero" href="#hero" class="dot"><span class="hide">dot</span></a>

<a section-id="whole" href="#whole" class="dot"><span class="hide">dot</span></a>

<a section-id="split" href="#split" class="dot"><span class="hide">dot</span></a>

<a section-id="two-split" href="#two-split" class="dot"><span class="hide">dot</span></a>

<a section-id="three-split" href="#three-split" class="dot"><span class="hide">dot</span></a>

<a section-id="footer" href="#footer" class="dot"><span class="hide">dot</span></a>

As for your javascript code, you'll need to select the items with section-id attribute and check if the associated ID from sections has class current

var aChildren = $('.side ul').children();

var aArray = ;

for (var i=0; i < aChildren.length; i++) {

   var aChild = aChildren[i];

   var ahref = $(aChild).attr('section-id');

   aArray.push(ahref);

}



for (var i=0; i < aArray.length; i++) {

   var theID = aArray[i];



   if($('#'+theID).hasClass('current')) {

      $("a[href='#" + theID + "']").addClass('greens');

   } else {

      $("a[href='#" + theID + "']").removeClass('greens');

   }

}

I don't know how is your html looks, here I am giving sample code as it work same as you want.

EDIT: Added on scroll too

$("ul li a").click(function(){

   $current=$(this);

  $("ul li").each(function(){

    $(this).removeClass("current");

  })

   $current.parent().addClass("current");

});





 var one_pos=$('#one').offset().top;

 var two_pos=$('#two').offset().top;

 var three_pos=$('#three').offset().top;

 var four_pos=$('#four').offset().top;

 var five_pos=$('#five').offset().top;

 

 $(window).on('scroll', function() {

  

    var current_pos = window.pageYOffset;

    if(current_pos>one_pos && current_pos<two_pos){

        $("ul li a[href='#one']").click();

    }else if(current_pos>two_pos && current_pos<three_pos){

        $("ul li a[href='#two']").click();

    }else if(current_pos>three_pos && current_pos<four_pos){

        $("ul li a[href='#three']").click();

    }else if(current_pos>four_pos && current_pos<five_pos){

        $("ul li a[href='#four']").click();

    }else if(current_pos>four_pos){

        $("ul li a[href='#five']").click();

    }

 

 })

div{

height:200px;

padding:2%;

border:1px solid;

}

ul{

position:fixed;

list-style:none;

}

ul li.current i{

   color:green;

}

ul li i{

   color:#ddd;

}

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css">

  



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>







<ul>

<li class="current"><a href="#one"><i class="fa fa-circle"></i></a></li>

<li><a href="#two"><i class="fa fa-circle"></i></a></li>

<li><a href="#three"><i class="fa fa-circle"></i></a></li>

<li><a href="#four"><i class="fa fa-circle"></i></a></li>

<li><a href="#five"><i class="fa fa-circle"></i></a></li> 

</ul>



<div id="one">one</div>

<div id="two">two</div>

<div id="three">three</div>

<div id="four">four</div>

<div id="five">five</div>





<div>rest</div>

OK so after some time and lots of help, this is the solution :

$(window).scroll(function(){



  var cutoff = $(window).scrollTop();



  panel.each(function(){

    if($(this).offset().top + $(this).height() > cutoff){

      panel.removeClass('current');

      $(this).addClass('current');

      return false;

    }

  })



  var aChildren = $('.side ul').children();

  var aArray = ;

  for (var i=0; i < aChildren.length; i++) {

    var aChild = aChildren[i];

    var ahref = $(aChild).attr('section-id');

    aArray.push(ahref);

  }



  for (var i=0; i < aArray.length; i++) {

    var theID = aArray[i];



    if($('#'+theID).hasClass('current')) {



      $("a[href='#" + theID + "']").addClass('greens');



  } else {

      $("a[href='#" + theID + "']").removeClass('greens');



  }

}

Thanks to @Mojo Allmighty

What this does is "Loop through all a-elements, and color them if the panel has the class "current"".
You problem:
If the panel has class "current" color all a-elements green
What you want:
IF the panel has class current lookup the corresponding a-element (belonging to the panel) and addClass green.

So this does not check if the single a-element should get the class "greens" based on which panel is currently active ("current").

Without insight into the rest of the code you should/could do 1 of 2 things;

1. Loop through the panels and add the class "Greens" to the corresponding a-element.


2. Loop through the a-elements (as you're doing now), and check the corresponding panel element (the panel element that belongs to the a-element).

Depending on your code this might be as easy as:

$panel.find("a").addClass('greens');

---- edit ---

Although there's an accepted answer already you could do this with a somewhat easier to understand JS and HTML (without the loops and all).
On the panel you can add data-attributes with names that correspond to the a-elements you want to make green/active. When you are making the panel active you can also select the single a-element that corresponds to your panel (so panel with data-corresponding-link="hero" refers to the a-element with data-id="hero"), and just add the class green to it.
You can choose to first select all a-elements and remove the class green or select the single a-element which has the class green and remove that single one.

<panel class="hero current" data-corresponding-link="hero"></panel>

<panel class="other-panel" data-corresponding-link="other-panel"></panel>

<a data-id="hero" href="#hero" class="dot"><span class="show">dot</span></a>

<a data-id="other-panel" href="#three-split" class="dot"><span class="hide">dot</span></a>

js:

$(window).scroll(function(){



  var cutoff = $(window).scrollTop();



  panel.each(function(){

    if($(this).offset().top + $(this).height() > cutoff){

      panel.removeClass('current');

      $(this).addClass('current');



      $(".green").removeClass("green") //Select all the green classes and remove the class green (you could scope this further down to a.green or something).

      $("data-id='"+panel.dataset.correspondingLink+"']").addClass("green") //based on the panels corresponding-link data-attribute select the element(s) that have this data-attribute data-id set to "hero" and addClass green

      return false;

    }

  })

}