динамическая таблица содержимого с помощью JQuery

Question

Я пытаюсь создать таблицу фиксированной контента на странице, которая выдвигает на первый план, какие элементы отображаются на странице, добавив класс под названием «активный» Мой HTML выглядит следующим образом:

<div id="table_of_content"> 
<a class="essay_intro" href="#">Intro</a> 
<a class="essay_body" href="#">Body</a> 
<a class="essay_conclusion" href="#">Conclusion</a> 
</div> 

<div class="dircontent" id="essay_intro"> 
</div> 
<div class="dircontent" id="essay_body"> 
</div> 
<div class="dircontent" id="essay_conclusion"> 
</div> 

Мой Javascript выглядит следующим образом:

$(document).ready(function() { 
    $(window).scroll(function(){ 
     $('.dircontent').each(function(i){ 
      var bottom_of_object = $(this).offset().top + $(this).outerHeight(); 
      var top_of_object = $(this).offset().top; 
      var bottom_of_window = $(window).scrollTop() + $(window).height(); 
      var top_of_window = $(window).scrollTop(); 
      var id_of_object = this.id; 

      if(bottom_of_window > top_of_object && top_of_window < bottom_of_object){ 
       $("."+id_of_object).attr('class', 'active'); 
      }else{ 
       $("."+id_of_object).removeClass('active'); 
      } 
     }); 
})}); 

в настоящее время код запускается как только я начинаю прокрутки и никогда не уходит. Актив класса никогда не удаляется из элемента, который не отображается на странице. Как я могу это исправить? любое лучшее решение, кроме этого, чтобы показать пользователю, где они находятся на странице? Я ищу простой код, чем плагин.

Answer 1

Просто замените

$("."+id_of_object).attr('class', 'active'); 

с

$("."+id_of_object).addClass('active'); 

Вы удаляете класс id_of_object при использовании attr, так $("."+id_of_object) не найти ваш объект больше.

Answer 2

jQuery поставляется с функцией .addClass("classname"), поэтому используйте это вместо .attr() при работе с классами. Кроме того, перед каждым циклом введите:

$(".active").removeClass("active"); 

Затем просто удалите предложение else из инструкции if. И в вашем, если заявлении, используйте:

$(this).addClass("active"); 

Вы используете классы, так что JQuery будет выбрать все классы с таким именем, поэтому в любое время вы запускали $("."+id_of_object).removeClass("active"); любой элемент с таким же именем класса будет иметь это активный класс удалено.