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

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>