Javascript 选择与另一个元素匹配的每个元素以创建动态侧导航

我想制作一个动态列表，可以更改div滚动条上的活动元素。 为此，我有这样一个导航列表

<div class="liste-categorie">
    <ul id="top-menu">
        <li><a class="hover-3" href="#sashimis">Sashimis</a></li>
        <li><a class="hover-3" href="#Californiarolls">Californiarolls</a></li>
        <li><a class="hover-3" href="#Rainbowrolls">Rainbowrolls</a></li>
    </ul>
</div>

以下是目标内容

<div class="col-md-9 wow zoomIn articles">
    <div class="container-fluid items">
        <div id="Sashimis" class="item"></div>
        <div id="Californiarolls" class="item"></div>
        <div id="Rainbowrolls" class="item"></div>
    </div>
</div>

那么，我的卷轴脚本在哪里

$(".articles").scroll(function() {
    var windscroll = $(".articles").scrollTop();
    if (windscroll >= 0) {
        $('.items .item').each(function(i,obj) {
            if ($(this).position().top <= windscroll && $(this).position().top + $(this).height() > windscroll) {
                $('#top-menu li.activate').removeClass('activate');
                $('#top-menu li').eq(i).addClass('activate');
            }
        });
    } else {
        $('#top-menu li.activate').removeClass('activate');
        $('#top-menu li').addClass('activate');
    }
}).scroll();

$（“.articles”）.滚动（函数（）{
var windscroll=$（“.articles”）.scrollTop（）；
如果（风切变>=0）{
$（'.items.item'）。每个（函数（i，obj）{
如果（$（此）.position（）.top windscroll）{
$（'#顶部菜单li.activate'）.removeClass（'activate'）；
$（'#顶部菜单li'）.eq（i）.addClass（'activate'）；
}
});
}否则{
$（'#顶部菜单li.activate'）.removeClass（'activate'）；
$（“#顶部菜单li”）.addClass（'activate'）；
}
}).scroll（）；

---

但它不起作用。我做错了什么

仅供参考，bootstrap有一个组件可以为您执行此操作：也请单击

添加