Question

我正在制作一个固定辅助导航到视口右侧的网站。使用Waypoints当视口底部出现特定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");
});
// ...

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

2 个答案: