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>