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

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

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

然后从if语句中删除你的else子句。在if语句中，使用：

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

您正在使用类，因此jQuery将选择具有该名称的所有类，因此，只要您运行$("."+id_of_object).removeClass("active");任何具有相同类名的元素，就会删除它的活动类。

使用jquery

2 个答案: