javascript - 当未在视口(viewport)中显示时从元素中删除类

Question

我正在制作一个将辅助导航固定在视口(viewport)右侧的网站。使用 Waypoints当特定的 id 出现在视口(viewport)底部时，我已经能够向我的导航 anchor 元素添加一个类。但是，我不知道该怎么做，是当元素不再位于视口(viewport)中时从该元素中删除该类。现在我的导航将从 active 类获得正确的样式，但是当我向下滚动页面时，每个导航元素将保持 active 类样式。当元素不再显示在屏幕上时，我需要删除事件类。感谢您的帮助。

jQuery:

$("#logo").waypoint(function(){
    $("#logo-nav").addClass('active');
});

$("#design").waypoint(function(){
    $("#design-nav").addClass('active');
});

$("#outdoor").waypoint(function(){
    $("#outdoor-nav").addClass('active');
});

$("#online").waypoint(function(){
    $("#online-nav").addClass('active');
});

$("#photo").waypoint(function(){
    $("#photo-nav").addClass('active');
});

$("#video").waypoint(function(){
    $("#video-nav").addClass('active');
});

实时 html 页面:

http://dai1.designangler.com/work

Answer 1

在每个 addClass() 之前添加这一行:

$('.active').removeClass('active');

如果你给你的航路点元素一个公共(public)类，那么你可以用以下代码替换上面的所有代码:

$(".waypoint-element").waypoint(function(){
    $('.active').removeClass('active');
    $('#' + this.id + '-nav').addClass('active');
});