當未在視口中顯示時，從元素中刪除類

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");
});
// ...