在页面滚动上添加/删除导航对象的类

Question

我正在尝试更改我正在开发的网站的导航栏中的对象类别。基本上，当我滚动到网页的某些部分时，我希望链接显示为活动状态，并在它们滚动时删除活动的类。

我设法使链接显示为活动状态，但也无法将其删除。到目前为止，这是我目前无法使用的内容：

$(document).on('scroll', function() {
  if ($(this).scrollTop() >= $('#cards').position().top) {
    $("#navcard").addClass("active");;
  } else {
    $("navcard").removeClass("active")
  }
  if ($(this).scrollTop() >= $('#projects').position().top) {
    $("#navprojects").addClass("active");;
  } else {
    $("navprojects").removeClass("active")
  }
  if ($(this).scrollTop() >= $('#dave').position().top) {
    $("#navdave").addClass("active");;
  } else {
    $("navdave").removeClass("active")
  }
})

#cards,
#projects,
#dave {
  height: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="navacard">My navacard</div>
<div id="navprojects">My navprojects</div>
<div id="navdave">My navdave</div>
<br>
<div id="cards">My navacard</div>
<div id="projects">My navprojects</div>
<div id="dave">My navdave</div>

我希望有人能提供帮助。

编辑：这就是现在正在发生的事情：

Answer 1

您忘记在removeClass部分中添加#：

$(document).on('scroll', function() {
  if ($(this).scrollTop() >= $('#cards').position().top) {
    $("#navcard").addClass("active");;
  } else {
    $("#navcard").removeClass("active")
  }
  if ($(this).scrollTop() >= $('#projects').position().top) {
    $("#navprojects").addClass("active");;
  } else {
    $("#navprojects").removeClass("active")
  }
  if ($(this).scrollTop() >= $('#dave').position().top) {
    $("#navdave").addClass("active");;
  } else {
    $("#navdave").removeClass("active")
  }
})

更新

尝试将您的代码更改为此，让我知道每个console.log的结果是什么

$(document).on('scroll', function() {

  console.log($(this).scrollTop());
  console.log($('#cards').position().top);
  console.log($('#projects').position().top);
  console.log($('#dave').position().top);

  if ($(this).scrollTop() >= $('#cards').position().top) {
    $("#navcard").addClass("active");;
  } else {
    $("#navcard").removeClass("active")
  }
  if ($(this).scrollTop() >= $('#projects').position().top) {
    $("#navprojects").addClass("active");;
  } else {
    $("#navprojects").removeClass("active")
  }
  if ($(this).scrollTop() >= $('#dave').position().top) {
    $("#navdave").addClass("active");;
  } else {
    $("#navdave").removeClass("active")
  }
})