当未在视口中显示时，从元素中删除类

Question

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

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

如果为路标元素提供一个通用类，则可以将以上所有代码替换为：

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

Answer 2

您可以仅在到达某个航路点时从所有导航链接中删除active类，然后将其添加到当前活动的类中。

var setActive = function(id) {
    $(".nav > a").removeClass('active');
    $(id).addClass('active');
}

$("#logo").waypoint(function(){
    setActive("#logo-nav");
});
// ...