javascript scrollTop根据页面上的位置更改类

Question

我正在尝试根据您在页面的哪个位置创建页面导航的活动状态。

这是我到目前为止所拥有的......

$(window).scroll(function () {
var scroll = $(window).scrollTop();

if (scroll >= 0) {
    $(".nav1").addClass("active");
} else if (scroll >= 500) {
    $(".nav1").removeClass("active");
    $(".nav2").addClass("active");
} else {
    $(".active").removeClass("active");
}});

但未按预期工作

Answer 1

$(window).scrollTop();不能是否定的。因此，您的代码将始终执行第一个if statement。这一个

 if scroll >= 0) {
    $(".nav1").addClass("active");
 }

其余代码永远不会被执行。

尝试分离您的if statements。

if (scroll >= 0) {
    $(".nav1").addClass("active");
} 
if (scroll >= 500) {
    $(".nav1").removeClass("active");
    $(".nav2").addClass("active");
} else {
    $(".active").removeClass("active");
}});