javascript - 使用 jquery 的动态目录

Question

我试图在页面上创建一个固定的内容表，通过添加一个名为“active”的类来突出显示页面上哪些元素可见我的 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');
            }
        }); 
})});

目前，一旦我开始滚动，代码就会被触发，并且永远不会消失。类 active 永远不会从页面上不可见的元素中删除。我怎样才能解决这个问题？还有比这更好的解决方案来向用户显示他们在页面上的位置吗？我正在寻找比插件更简单的代码。

Answer 1

直接替换即可

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

与

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

您在使用 attr 时删除了 id_of_object 类，因此 $("."+id_of_object) 将无法再找到您的对象.