javascript - 如何在 JavaScript 中自动移动活动类

Question

我创建了简单的滚动动画页面，如果我滚动右侧想删除以前的项目

然后如果我滚动左侧想要删除下一个项目。看到下面这张图片，如何解决这个问题。你能解决这个问题吗？

// Sticky Catergory Menu
if ($(window).scrollTop() > 400) {
  $("#stickyMenu").addClass('sticky');
} else {
  $("#stickyMenu").removeClass('sticky');
}

//get current sroll position
var scrollPosition = $(window).scrollTop();

//get the position of the containers
for (i = 0; i < span_list.length; i++) {
  if (scrollPosition >= ($("#" + span_list[i]).offset().top) - 50) {
    $("#nav" + (i + 1)).siblings().removeClass("active");
    $("#nav" + (i + 1)).addClass("active");
  }
}

// if (("div.item:visible")) {
// if ($("div.item").is(":visible")) {
//    var content = $(this).html()
//    console.log("content == " + content)
//    var row_id = $(this).parent().closest("div[id]").attr("id");
//    console.log("row_id == " + row_id)
// }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="topnav sticky" id="stickyMenu">
  <span data-id="appetizers" id="nav1" class="cat-nav">Appetizers</span>
  <span data-id="desserts" id="nav2" class="cat-nav">Desserts</span>
  <span data-id="pizza--classic-11-inches-" id="nav3" class="cat-nav active">Pizza (Classic 11 inches)</span>
  <span data-id="salad" id="nav4" class="cat-nav">Salad</span><span data-id="soups" id="nav5" class="cat-nav">Soups</span>
  <span data-id="thai-noodles" id="nav6" class="cat-nav">Thai Noodles</span>
</div>

标签： javascriptjquery