HTML
<ul>
<li id="1">
<div class="nodes">
<div class="round"></div>
<div class="line"></div>
</div>
<a href="#1"
>1</a
>
</li>
<li id="2">
<div class="nodes">
<div class="round"></div>
<div class="line"></div>
</div>
<a href="#2"
>1</a
>
</li>
<li id="3">
<div class="nodes">
<div class="round"></div>
<div class="line"></div>
</div>
<a href="#3"
>1</a
>
</li>
<li id="4">
<div class="nodes">
<div class="round"></div>
<div class="line"></div>
</div>
<a href="#4"
>1</a
>
</li>
</ul>
Javascript
let $h3= $("article h3");
$(window)
.scroll(function () {
let $topCat = $h3.filter(
(i, el) => $(el).offset().top > $(window).scrollTop() - 70
);
if ($topCat.attr("id")) {
var parrent = $(`.toc ol`).find(`li#${$topCat.attr("id")}`);
parrent.addClass("active");
var child = $(".toc li")[parrent.index()].id;
$(`.toc li#${child}`).next().removeClass("active");
}
/*
*/
})
.scroll();
The code above only works once, but when the user scrolls back it doesn’t work
so, this is what I want
please look this
it starts from the li element which contains id #2
I want when starting from ID 2,3 and so on it will provide classes after that until the end.
is this possible, Is there a better and more effective way than my code above?