Сиденав с прокруткой точек

Question

Я задал похожий вопрос, но не получил ответа, поэтому попробую еще раз. У меня есть одна веб-страница. На этой странице я пытаюсь сделать боковую навигацию из точек. Веб-страница разбита на разделы. Мне нужно сделать так, чтобы при каждом переходе к другому разделу точка меняла цвет. Например: первый раздел - первая точка зеленого цвета, остальные пустые. Чем, если я перехожу во 2-й раздел, 2-ая точка становится зеленой, а остальные пусты. Вот скрипка: https://jsfiddle.net/c1d3tfnL/2/

Я думаю, что где-то в этой части есть проблема

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');

  }

но я не уверен. Вместо того, чтобы окрашивать только одну точку, они все зеленые.

Вы увидите точки в верхней части страницы, но, поскольку у меня есть внутренняя база данных, я не могу все здесь разместить. Это должно выглядеть так:

Я сделал все, включая исправление. Вот так это выглядит сейчас.

Каждый круг всегда зеленый. Это сводит меня с ума.

Answer 1

Проблема в выборе разделов.Сейчас вы берете все элементы с классом panel и пытаетесь увидеть, содержит ли он класс current.Наличие if (panel.hasClass('current')) всегда будет возвращать true, потому что всегда будет элемент с классом panel, у которого есть этот класс, поэтому все точки будут зелеными.Вам нужен новый селектор, чтобы сопоставить ваш a с вашими разделами.

<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>

Что касается вашего кода JavaScript, вам нужно выбрать элементы с атрибутом section-id и проверить, связан ли связанный идентификатор изразделы имеют класс 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');
   }
}

Answer 2

Я не знаю, как выглядит ваш HTML, здесь я даю пример кода, так как он работает так же, как вы хотите.

РЕДАКТИРОВАТЬ: Добавлено на свиток тоже

$("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>

Answer 3

ОК, поэтому через некоторое время и много помощи, это решение:

$(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');

  }
}

Благодаря @Mojo Allmighty

Answer 4

То, что это делает, это «перебирает все a-элементы и окрашивает их, если панель имеет класс« current »».Ваша проблема: Если у панели есть класс «current», то все a-элементы зеленого цвета. Что вы хотите: ЕСЛИ у панели есть текущий класс, ищущий соответствующий a-элемент (принадлежащий панели) и addClass зеленого цвета.

Итакэто не проверяет, должен ли отдельный a-элемент получать класс "greens", в зависимости от того, какая панель активна в данный момент ("current").

Без понимания остальной части кода, которую вы должны / могли бы сделать 1из 2 вещей;

1. Переберите панели и добавьте класс "Greens" к соответствующему a-элементу.
2. Loop по a-элементам (как вы делаете сейчас) и проверьте соответствующий элемент панели (элемент панели, который принадлежит элементу a).

В зависимости от вашего кода это может быть так просто:

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

---- edit ---

Хотя уже есть принятый ответ, вы могли бы сделать это с несколько более простым для понимания JS и HTML (без циклов и всего).На панели вы можете добавить атрибуты данных с именами, которые соответствуют a-элементам, которые вы хотите сделать зелеными / активными.Когда вы делаете панель активной, вы также можете выбрать один a-элемент, соответствующий вашей панели (поэтому панель с data-соответствующим-link = "hero" относится к a-элементу с data-id = "hero"),и просто добавьте класс зеленый к нему.Вы можете сначала выбрать все a-элементы и удалить зеленый класс или выбрать единственный a-элемент с зеленым классом и удалить этот единственный.

<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;
    }
  })
}