How to auto move active class before after in JavaScript

33
October 13, 2021, at 4:10 PM

I have created simple scroll animation page, if I scroll right side want to delete previous items

then if I scroll left side want to delete next items. see this bellow image, how to solve this issues. could you please solve this issue.

// 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>

READ ALSO
Unexpected performance degradation in unpickled set in python

Unexpected performance degradation in unpickled set in python

Set operations of a separately pickled objects are significantly slower than set operations of normal objects, or jointly pickled object

43
How to set class name to child element of a wrapper element?

How to set class name to child element of a wrapper element?

Above is the block where an image component is being called

12
mysql Trigger update table

mysql Trigger update table

Trigger Triggername afhentet Tabel scan After Insert

58
How to do a mirror scroll effect on half of the page

How to do a mirror scroll effect on half of the page

I'm trying to recreate this scrolling mirror effect: http://mirrorschoolsdesigning

49